动态固定导航栏位置

Question

我在页面的一侧有一个导航栏，我希望它在特定位置将其位置从fixed更改为absolute 。 我基本上是想让它看起来像它在用户滚动经过时被我的页脚停住了。

我目前正在使用此代码，

$(window).scroll(function(){
    $("#myNavbar").css("top",Math.min( 562 , 1020 - $(this).scrollTop() ) );
});

这在定义滚动顶部的页面之一上效果很好。 不幸的是，我需要在高度不同的12页上重复这种行为。

我需要如何计算百分比？ 任何帮助将非常感激！

Answer 1

您要做的是获取页脚的scrollTop()位置。 从那里，您比较导航栏的scrollTop() （+导航栏height() ），并且一旦导航scrollTop() + height() >页脚scrollTop() ，就可以更改导航栏的类addClass('not-sticky') 。 其中.not-sticky{position:absolute} 。 希望这可以帮助