我有一个div.scroll_fixed与下面的CSS
.scroll_fixed {
position:absolute
top:210px
}
.scroll_fixed.fixed {
position:fixed;
top:0;
}
当div到达页面的顶部时，我使用以下jQuery代码设置.fixed类。
var top = $('.scroll_fixed').offset().top - parseFloat($('.scroll_fixed').css('margin-top').replace(/auto/,0));
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y >= top) {
// if so,ad the fixed class
$('.scroll_fixed').addClass('fixed');
} else {
// otherwise remove it
$('.scroll_fixed').removeClass('fixed');
}
});
这对于垂直滚动固定非常有用。但是使用小的浏览器窗口，水平滚动会导致与此固定div右侧的内容发生冲突。
我想要div与内容水平滚动。
任何人都可以指向正确的方向。仍然让我的脚潮湿与JS / JQuery。
我基本上希望它像在这个example的第二个框工作。
解决方法
演示保持元素的位置：固定和操作元素的左属性：
var leftInit = $(".scroll_fixed").offset().left;
var top = $('.scroll_fixed').offset().top - parseFloat($('.scroll_fixed').css('margin-top').replace(/auto/,0));
$(window).scroll(function(event) {
var x = 0 - $(this).scrollLeft();
var y = $(this).scrollTop();
// whether that's below the form
if (y >= top) {
// if so,ad the fixed class
$('.scroll_fixed').addClass('fixed');
} else {
// otherwise remove it
$('.scroll_fixed').removeClass('fixed');
}
$(".scroll_fixed").offset({
left: x + leftInit
});
});
使用leftInit考虑可能的左边距。试试这里：http://jsfiddle.net/F7Bme/
