javascript - 向下滚动时变为固定位置后，回到向上滚动时的绝对定位

Question

我正在处理左侧有一个小导航框的页面，我希望在用户向下滚动时始终可见。我正在使用下面的脚本来获得这种效果，除了一个问题外，它工作得很好。

当我向上滚动时，框不会恢复到其绝对位置，而是保持固定位置，然后与开始横幅重叠。我对这个想法很陌生，关于如何在用户向上滚动到那个点时使 div 恢复到原始设置有什么想法或建议吗？

$(window).scroll(function(){
if  ($(window).scrollTop() >= 229){ //looking for the window to scroll to 229px in this example
     $('.timeline').css({position:'fixed',margin:'-250px 0 0 50px'});
} else {
     $('.timeline').css({position:'absolute'});
    }
});

要查看我正在处理的页面:http://embassyofrock.com/press

Answer 1

当您恢复为绝对值时，您并没有取消设置边距。我建议改为添加/删除一个类，这样您就不必担心重置值。

Javascript:

$(window).scroll(function(){

    if($(window).scrollTop() >= 229){
        $('.timeline').addClass('fixed');
    } else {
        $('.timeline').removeClass('fixed');
    }
});

CSS:

.fixed {
    position: fixed;
    margin: -250px 0px 0px 50px;
}