粘性導航隱藏在頁面頂部

Question

我正在尋找一塊腳本，在我的頁面頂部隱藏了我的粘性導航。所以最後它應該在你進入網站時向下滾動。

這是我建立的網站：http://kmnew.kadushimarketing.com/index.php

這是我目前使用的腳本：

$(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(); 
    }); 

}); 

Answer 1

我明白了。我將腳本更改爲：

$(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(); 
      } 
     }); 


    }); 

}); 

然後我還添加了位置：固定到我的css。

Answer 2

我不知道如果這是你在找什麼。如果頁面大於窗口高度，請將其展示並放置在頂部

$(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(); 
    }); 

});