如何在粘滞菜单上仅显示主菜单
如何在粘滞菜单上仅显示主菜单
提问于 2015-10-23 11:47:30
我一直在研究如何制作粘性菜单，并查看了许多教程。我也在这里检查了一些相关的问题，但似乎有视图答案，它仍然不能在我这一端工作。我想做一个没有插件的。这有可能吗？
这是我在其中一个教程中找到的代码。我遵循了教程，但它似乎不能让菜单坚持。
以下是我在原始文件中添加的代码：：
在html文件上：
<!--sticky menu-->
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<!--ends here-->在css上：
.fixed{
position:fixed;
top:0;
left: 0;
width: 100%;
background-color: transparent;
}
nav{
z-index: 500;
background-color: #ffffff;
}
.nav-placeholder{
margin: 0 0 40px 0;
}
.fixed .nav-inner{
padding: 0 20px;
}
.fixed .nav-inner-most{
max-width:700px;
margin: 0 auto;
background-color: #ffffff;
}js脚本：
jQuery(document).ready(function() {
// define variables
var navOffset, scrollPos = 0;
// add utility wrapper elements for positioning
jQuery("nav").wrap('<div class="nav-placeholder"></div>');
jQuery("nav").wrapInner('<div class="nav-inner"></div>');
jQuery(".nav-inner").wrapInner('<div class="nav-inner-most"></div>');
// function to run on page load and window resize
function stickyUtility() {
// only update navOffset if it is not currently using fixed position
if (!jQuery("nav").hasClass("fixed")) {
navOffset = jQuery("nav").offset().top;
}
// apply matching height to nav wrapper div to avoid awkward content jumps
jQuery(".nav-placeholder").height(jQuery("nav").outerHeight());
} // end stickyUtility function
// run on page load
stickyUtility();
// run on window resize
jQuery(window).resize(function() {
stickyUtility();
});
// run on scroll event
jQuery(window).scroll(function() {
scrollPos = jQuery(window).scrollTop();
if (scrollPos >= navOffset) {
jQuery("nav").addClass("fixed");
} else {
jQuery("nav").removeClass("fixed");
}
});
});摘要：http://jsfiddle.net/misaki03/9gtk9x7r/1/
我希望有人能在这里帮我。
我编辑了这个，因为我想知道这个代码是什么
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>在我下面的教程中，是针对的。我关注了网站的演示，看到了这行令人困惑的代码。(我做了一个链接，因为代码太长了)
http://learnwebcode.com/tutorial-files/sticky-navigation/js/jquery-1.11.0.min.js
我不确定它是什么，但它起作用了。菜单现在处于粘滞模式。但是，当我向下滚动它时，它正在显示子菜单。有没有办法解决这个问题？
Stack Overflow用户
发布于 2015-10-23 18:37:03
在尝试寻找不同的来源后，我在Amit的帮助下解决了这个问题。我看到了这个问题，发现它在某种程度上与我需要的代码相似，并尝试了一下。我稍微调整了一下
这里是参考链接：
sticky navigation with submenu and smooth scroll
我只是添加了他在jfiddle上提到的代码，它在我身上起作用了，谢谢@Amit和这个问题的所有者
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33294561
复制相关文章
相似问题
腾讯云开发者
