1

我正在尝试在低于固定导航（总高度为 120px）的 div 上实现以下 jquery sticky_navigation 代码。我的问题是脚本通过在滚动过去（即页面顶部）后将 div 的位置更改为固定来工作。然而，当用户滚动到页面顶部时，div 被顶部固定导航隐藏并导致不流畅/跳跃的体验。我希望在“立即获取帮助”部分到达导航底部时触发它。

我认为修复将类似于将触发点更改为滚动顶部下方 120 像素，但不幸的是我不知道如何编写 jquery 并且我尝试过的一切都失败了。任何帮助将不胜感激！

这是我正在使用的 jquery sticky_navigation 代码，您可以在这里查看暂存站点http://staging.alcoholrehab-florida.com/alcohol-rehab-programs.html

    <script>
    $(function() {

// grab the initial top offset of the navigation 
var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;

// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
    var scroll_top = $(window).scrollTop(); // our current vertical position from the top

    // if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
    if (scroll_top > sticky_navigation_offset_top) { 
        $('#sticky_navigation').css({ 'position': 'fixed', 'top':120, 'background':'#f0f0f0' }); });
    } else {
        $('#sticky_navigation').css({ 'position': 'relative', 'top':0, 'background':'#fff' }); 
    }   
};

// run our function on load
sticky_navigation();

// and run it again every time you scroll
$(window).scroll(function() {
     sticky_navigation();
});

    });
    </script>

PS 请原谅任何“协议”错误，第一次发布；长期读者。

4

0 回答 0