0

我试图在顶部实现一个固定的导航，在滚动过去的标题之后（目前工作正常）和一个随着页面向下滚动的侧边栏，直到侧边栏中的第一个和第二个 div 元素之间，然后修复。

[编辑：这是小提琴 - jsfiddle.net/rqHCx/5 ]

我尝试修改导航栏的工作代码，暂时不用担心滚动过去的第一个元素：

$(function() {
    var side_offset_top = $('#side').offset().top;
    var side = function(){
        var scroll_top = $(window).scrollTop();
        if (scroll_top > side_offset_top) { 
            $('#side').css({ 'position': 'fixed', 'top': 40, 'right': 0 });
        } else {
            $('#side').css({ 'position': 'relative' });
        }   
    };
    side();
    $(window).scroll(function() {
        side();
    });
});

但是有了这个，侧边栏当然会跳到浏览器的右侧 - 但我不想指定一个像素值，'right': px因为它会因不同的屏幕宽度而搞砸。

我怎样才能让它不水平移动，并在滚动到它后垂直固定到位？

另外，当我向上滚动时，引入了 40px 的顶部边距，我假设我需要以某种方式检查返回，然后将其删除？

谢谢，

4

2 回答 2

1

如果您在它是相对的（在其正确的水平位置）时计算它的水平位置，您可以在它固定时使用该数字。我添加了一个顶部和右侧值，它应该何时返回到相对位置以重置其位置。

$(function() {
    var side_offset = $('#side').offset();
    var side_offset_top = side_offset.top;
    var side_offset_right = side_offset.right;
    var side = function(){
        var scroll_top = $(window).scrollTop();
        if (scroll_top > side_offset_top) { 
            $('#side').css({ 'position': 'fixed', 'top': 40, 'right': side_offset_right });
        } else {
            $('#side').css({ 'position': 'relative', 'top': 0, 'right': 0});
        }   
    };
    side();
    $(window).scroll(function() {
        side();
    });
});
于 2013-07-05T15:16:25.067 回答
0

我终于明白了。

$(function() {
    var ad_offset_right = $('#side-wrap').offset().right;
    var ad = function(){
        var scroll_top = $(window).scrollTop();
        if (scroll_top > 490) { 
            $('.ad300x600').css({'position':'fixed', 'top':40, 'right':ad_offset_right});
        } else {
            $('.ad300x600').css({'position':'relative'});
        }   
    };
    ad();
    $(window).scroll(function() {
        ad();
    });
});

其中 490px 是到.ad300x600我要修复的类的距离，40px 是固定在侧栏上方的导航栏的高度。

于 2013-07-08T00:09:19.097 回答