[英]Scroll down then fixed navigation glitch
I have this glitch that is bothering me. 这种小故障困扰着我。 The problem is that my navigation is not working properly as I wanted it to be. 问题是我的导航无法正常运行。 It jumps even though I have not reached the top of my nav or after passing the height of my header with scrollTop value. 即使我还没有到达导航栏的顶部,也没有通过scrollTop值传递标题的高度后,它会跳转。 I recreate the problem in jsfiddle . 我在jsfiddle中重新创建了问题。
var header_height = $('header').height();
//var main_nav = $('nav');
$(document).scroll(function () {
if ($(this).scrollTop() >= header_height) {
$('nav').addClass("fixed");
} else {
$('nav').removeClass("fixed");
}
});
Instead of taking the height of header, you should be taking the top of .main_nav
to compare with ScrollTop. 而不是使用标头的高度,您应该使用.main_nav
的顶部与ScrollTop进行比较。
Change the first line in the code you posted above to: 将上面发布的代码中的第一行更改为:
var header_height = $('.main_nav').position().top;
That should work. 那应该工作。 Here is the working fiddle. 这是工作中的小提琴。
Hope this helped. 希望这会有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.