Question

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

我尝试修改导航栏的工作代码，而不用担心现在滚过第一个元素：

$(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的margin-top，我假设我需要以某种方式检查返回，然后删除它？

谢谢，

Answer 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();
    });
});

Answer 2

我终于明白了。

$(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是固定在侧栏上方的导航栏的高度。

侧边栏滚动x金额，然后修复下方（也固定）标题？

2 个答案: