我正在设计一个滚动浏览标题后出现粘性导航的网站。
我使用此脚本开始工作:
$(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%,所以当一个窗口调整大小时,导航会显得太晚或太早。
例如,使用670px高视口加载页面,大小缩小到400px视口。尽管te导航仅在670px之后出现
,但我的标题会缩小到400px高任何解决方法? 感谢
答案 0 :(得分:0)
将你的javascript函数触发器放在document.ready()而不是window.load()?
尝试将此部分移出window.load()。
$(window).scroll(function(){
checkY();
});
答案 1 :(得分:0)
试试这个:
$(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();
});//]]>
它只是修改后的第一行(加载大小调整)。