[英]Make nav bar sticky
guys, 伙计们,
I have a nav bar on my website ( http://www.mtscollective.com - 'menu-secondary-wrap') and I'm trying to make it stay at the top of the page when the user scrolls down. 我的网站( http ://www.mtscollective.com-'menu-secondary-wrap')上有一个导航栏,当用户向下滚动时,我试图使其保持在页面顶部。
I've tested several jQuery samples (such as http://www.hongkiat.com/blog/css-sticky-position/ ), but they always come with their own CSS, which seems to interfere with what I'm already using. 我已经测试了几个jQuery示例(例如http://www.hongkiat.com/blog/css-sticky-position/ ),但是它们始终带有自己的CSS,这似乎干扰了我已经在使用的内容。
What's the easiest/best way to do this for an existing class? 对于现有课程,最简单/最佳的方法是什么?
Thanks! 谢谢! Mario 马里奥
Use something like this (you can check it in browser console F12) 使用类似这样的内容(您可以在浏览器控制台F12中进行检查)
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > 220) {
jQuery(".menu-secondary-wrap").css({"position": "fixed", "top": 0, "width": "950px"});
} else {
jQuery(".menu-secondary-wrap").removeAttr("style");
}
});
Works completly fine 完全正常
Try this script 试试这个脚本
jQuery(document).scroll(function() {
if (jQuery(this).scrollTop() > 175) {
jQuery('.menu-secondary-wrap').css({
'position': 'fixed',
'top': '0',
'width': '950px'
});
}
else {
jQuery('.menu-secondary-wrap').css('position','static');
}
});
The easiest way to do this is to make your header wrapper have fixed positioning and a higher z-index than the wrapper for the rest of your sites content... 最简单的方法是使标头包装具有固定的位置,并具有比其余网站内容的包装更高的z-index ...
Example: 例:
.header-wrapper {
width: 100%;
height: 80px;
position: fixed;
z-index: 20;
}
.content-wrapper {
width: 100%;
margin-top: 80px; // height of header wrapper.
z-index: 10;
}
Then your HTML might look like: 然后,您的HTML可能如下所示:
<div class="header-wrapper">the header</div>
<div class="content-wrapper">the content</div>
Hope this helps. 希望这可以帮助。
If you want a simple solution. 如果您想要一个简单的解决方案。 Apply position: fixed
to an element 应用position: fixed
到元素
body {
padding-top: 50px;
}
/* Header span-24, could not find a proper identifier for it */
.span-24 {
position: fixed;
z-index: 99;
background: #000;
top: 0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.