[英]Floating menu, how to stick menu to the top?
我对js还是比较陌生的,并且正在使用浮动菜单。
这就是我的js代码的样子
$(function(){
console.log('jest');
$(window).scroll(function(event){
console.log($('#menu').offset().top, $(this).scrollTop());
if ($('#menu').offset().top <= $(this).scrollTop()+$(window).height()) {
$('#menu').addClass("fixed");
} else {
$('#menu').removeClass("fixed");
}
});
});
当达到顶部时,将正确添加fixed
类。
我的问题是:在fixed
班级里我应该怎么做才能使菜单排在最前面?
.fixed{
position: fixed;
top: 0;
right: 0;
left: 0;
}
尼斯是一个简单的“立场:粘性”。
brand { display: block; background-color: pink; padding: 10px; font-size: 20pt; } header { background-color: yellow; border: 2px solid black; padding: 10px; position: sticky; top: 0; } section { background-color: silver; padding: 10px; } body { padding: 0; margin: 0; }
<brand> <div>This is our branding,. It can scroll away.</div> <small>for all your header needs,.. </small> </brand> <header> This is the header </header> <section> Our othe stuff can go in here.<br><br><br><br><br><br><br><br><br><br> Scroll down<br><br><br><br><br><br> Even further<br><br><br><br><br> A little bit more<br><br><br><br><br> Ok I'm bored now. </section> <header> This is repeated, see how the header takes over </header> <section> Our othe stuff can go in here.<br><br><br><br><br><br><br><br><br><br> Scroll down<br><br><br><br><br><br> Even further<br><br><br><br><br> A little bit more<br><br><br><br><br> Ok I'm bored now. </section>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.