我有一个自适应的网页,并且首先位于页面中间的粘性菜单左右。当我滚动并且菜单到达顶部时它变得固定。这很好用,问题是当我调整菜单上面的内容时,当然菜单变得不那么高了,所以当我再次向后滚动菜单时,当我到达顶部时菜单不会变粘,因为它仍然认为上面的内容与调整大小之前的级别相同,并且不会注意到内容已调整大小。所以当菜单到达顶部时菜单变得粘稠,除非它超过顶部。粘贴需要一些时间。如果我刷新浏览器此问题没有显示,它只显示我正在调整大小时。我想知道菜单是否有任何解决方案来尊重调整大小?这是我的代码:
<header>
<nav>
<ul>
<li>
<a href='#about'>
About
</a>
</li>
<li>
<a href='work.html'>
Work
</a>
</li>
<li>
<a href='#services'>
Services
</a>
</li>
<li>
<a href='#contact'>
Contact
</a>
</li>
</ul>
</nav>
</header>
header {
background-color: white;
border-bottom: 1px solid #eaeaea;
/* box-shadow: 1px 0 2px 1px rgba(0, 0, 0, 0.2);*/
padding: .5em 0;
}
header h1 {
display: none;
}
header ul {
text-align: center;
}
header ul li {
display: inline-block;
}
header ul li a {
padding: 1.08em 0.3em;
text-transform: uppercase;
color: #01486b;
font-size: .8em;
font-weight: 300;
}
header ul li a:hover {
color: #139ee3;
}
.padding
{
padding: 3.61em 0 0 0;
}
function navigate(e) {
var element = $(this).attr('href');
var where = $(element).offset().top-71.5;
$('html, body').animate({scrollTop:where},1000,'swing');
e.preventDefault();
}
$('nav a').on('click', navigate);
var offset = $('header').offset().top;
function changeClass(e) {
var countScroll = $('html').scrollTop() || $('body').scrollTop();
if (countScroll >= offset) {
$('header').addClass('fixed_menu');
$('main').addClass('padding');
} else {
$('header').removeClass('fixed_menu');
$('main').removeClass('padding');
}
e.preventDefault();
}
$(document).on('scroll',changeClass);
答案 0 :(得分:0)
使用:强>
var countScroll = $('body').scrollTop();
而不是
var countScroll = $('html').scrollTop() || $('body').scrollTop();