滚动过标题后会出现DIV导航

我正在设计一个滚动浏览标题后出现粘性导航的网站。

我使用这个脚本工作了：

$(window).load(function(){ // Get the headers position from the top of the page, plus its own height var startY = $('#header').position().top + $('#header').outerHeight(); $(window).scroll(function(){ checkY(); }); function checkY(){ if( $(window).scrollTop() > startY ){ $('#navbar').slideDown(); }else{ $('#navbar').slideUp(); } } // Do this on load just in case the user starts half way down the page checkY(); });//]]> 

问题是脚在加载时读取标题的高度，但由于我的标题高度是视口的100％，当一个窗口resize时，导航显示得太晚或太早。

例如，使用670px高视口加载页面，大小缩小到400px视口。 尽管te导航仅在670px之后出现，但我的标题会缩小到400px高

有任何解决这个问题的方法吗？ 谢谢

Answer 1

把你的javascript函数触发器放在document.ready（）而不是window.load（）？

尝试将此部分移出window.load（）。

 $(window).scroll(function(){ checkY(); }); 

Answer 2

试试这个：

 $(window).on("load resize",function(e){ // Get the headers position from the top of the page, plus its own height var startY = $('#header').position().top + $('#header').outerHeight(); $(window).scroll(function(){ checkY(); }); function checkY(){ if( $(window).scrollTop() > startY ){ $('#navbar').slideDown(); }else{ $('#navbar').slideUp(); } } // Do this on load just in case the user starts half way down the page checkY(); });//]]> 

它只是修改后的第一行（加载大小调整）。