如何在粘滞菜单上仅显示主菜单
我一直在研究如何制作粘性菜单，并查看了许多教程。我也在这里检查了一些相关的问题，但似乎有视图答案，它仍然不能在我这一端工作。我想做一个没有插件的。这有可能吗？
这是我在其中一个教程中找到的代码。我遵循了教程，但它似乎不能让菜单坚持。
以下是我在原始文件中添加的代码：：
在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
我不确定它是什么，但它起作用了。菜单现在处于粘滞模式。但是，当我向下滚动它时，它正在显示子菜单。有没有办法解决这个问题？
回答 3
Stack Overflow用户
发布于 2015-10-23 12:14:24
Codepen http://codepen.io/noobskie/pen/avqVVd?editors=010
你在找这样的东西吗？你只是遇到了一些z-index问题，这些问题阻碍了我想做的事情，外加一些脚本错误。
这是stickymenu的一个更简洁的版本
function stickIt() {
var orgElementPos = $('.original').offset();
orgElementTop = orgElementPos.top;
if ($(window).scrollTop() >= (orgElementTop)) {
// scrolled past the original position; now only show the cloned, sticky element.
// Cloned element should always have same left position and width as original element.
orgElement = $('.original');
coordsOrgElement = orgElement.offset();
leftOrgElement = coordsOrgElement.left;
widthOrgElement = orgElement.css('width');
$('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
$('.original').css('visibility','hidden');
} else {
// not scrolled past the menu; only show the original menu.
$('.cloned').hide();
$('.original').css('visibility','visible');
}
}Stack Overflow用户
发布于 2015-10-23 18:37:03
在尝试寻找不同的来源后，我在Amit的帮助下解决了这个问题。我看到了这个问题，发现它在某种程度上与我需要的代码相似，并尝试了一下。我稍微调整了一下
这里是参考链接：
sticky navigation with submenu and smooth scroll
我只是添加了他在jfiddle上提到的代码，它在我身上起作用了，谢谢@Amit和这个问题的所有者
Stack Overflow用户
发布于 2015-10-23 12:43:59
sticky是为CSS position属性引入的新值。在达到给定的偏移阈值之前，该值在其父对象中的行为应类似于position: static，在这种情况下，它的行为就像该值是固定的一样。
.menu {
margin: 0;
padding: 0;
width: 100%;
background-color: #bffff3;
position: sticky;
}请查看此链接:http://www.sitepoint.com/css-position-sticky-introduction-polyfills/它可能会有所帮助。祝好运
https://stackoverflow.com/questions/33294561
复制相似问题
腾讯云开发者
