Jquery 粘性导航隐藏在页面顶部

我正在寻找一段脚本，它将我的粘性导航隐藏在页面的最顶端。因此，当你向下滚动进入网站时，它应该开始可见

这是我正在建设的网站：

这是我当前使用的脚本：

$(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':0, 'left':0 });
        } else {
            $('#sticky_navigation').css({ 'position': 'relative' }); 
        }   
    };

    // run our function on load
    sticky_navigation();

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

});

---

我不确定这是否是你要找的。如果scrolltop大于窗口高度，则显示它并将其放置在顶部

$(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
        var windowHeight = $(window).height();

        // 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 > windowHeight) { 
            $('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0, 'display': 'block' });
        } else {
            $('#sticky_navigation').css({ 'position': 'relative', 'display': 'none' }); 
        }   
    };

    // run our function on load
    sticky_navigation();

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

});

---

我明白了。我将脚本更改为：

$(document).ready(function(){

    // hide #sticky_navigation first
    $("#sticky_navigation").hide();

    // fade in #sticky_navigation
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#sticky_navigation').fadeIn();
            } else {
                $('#sticky_navigation').fadeOut();
            }
        });


    });

});

---

然后我还将position:fixed添加到我的css中。

而不是使用

position:relative

为什么不直接隐藏它呢？它不应该一直隐藏。仅在页面的最顶端。隐藏它并使用jquery创建滚动事件侦听器。在这里，您可以分析滚动位置并显示/隐藏导航。@当您将其设置为

位置：relative

时，Marcel不是在页面顶部吗？我想添加这样的内容：

$（文档）.ready（函数（）{//hide#back top first$（“#sticky#u导航”）.hide（）//淡入#back top$（函数（）{$（窗口）.scroll（函数（）{if（$（this）.scrollTop（）>100）{$（'sticky_导航'）.fadeIn（）}否则{$（'sticky_导航'）.fadeOut（）}）

很遗憾，这与我的代码没有什么不同。那么你想做什么？但是它可能无法100%工作……它在页面加载时显示得非常快，然后消失。有人知道如何解决这个问题吗？