Question

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

我认为修复将是将触发点更改为在scrollTop下方120px的行，但不幸的是我不知道如何编写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>

P.S。请原谅任何“协议”错误，第一次发布;很长时间的读者。

固定导航后在Div上使用jQuery Sticky Navigation

0 个答案: