使用JQuery显示/隐藏和粘贴导航

我有一个显示/隐藏div（“.medianav”）的bttn（“.medianavbttn”）。我的网页是针对移动设备的，因为display:fixed css代码不适用于它们，所以我使用jquery粘性导航来代替，因此我将它粘在页面的顶部。因为我想坚持导航也不仅按钮，我也必须display: hidden“medianav”。问题在于，在这种情况下，其虚拟包装的高度将显示为没有任何内容，因此它会推动我的页面下陷并且很丑陋。而不是隐藏“medianav”，我做了虚拟包装display: hidden，所以现在的导航高度是好的。但是：由于虚拟包装不能立即看到，当我打开导航时，滑动切换“摆动”动画并不平滑。使用JQuery显示/隐藏和粘贴导航

有人可以告诉我，我可以如何动画它光滑？或者，如果这是不可能的，我应该使用哪种方法来通过单击被按下的按钮来滚动浏览和浏览页面？

的HTML

<div class="medianavbttn">Show Menu</div> 

<div class="medianav"> 
    <ul id="medianav-links"> 
     <li class="current"><a href="#section1">About</a></li> 
     <li><a href="#section2">Gallery Photos</a></li> 
     <li><a href="#section3">Contact</a></li> 
    </ul> 
</div>

脚本

<!-- Nav Sticky Effect --> 
<script> 
    $(window).load(function(){ 
     $(".medianavbttn").sticky({ topSpacing: 0, className: 'sticky', wrapperClassName: 'navbttn-wrapper' }); 
    }); 
    $(window).load(function(){ 
     $(".medianav").sticky({ topSpacing: 0, className: 'sticky', wrapperClassName: 'nav-wrapper' }); 
    }); 
</script> 

<!-- Show - Hide Content --> 
<script> 
$(".medianavbttn").on("click", function(){ 
    $(".nav-wrapper").slideToggle("slow"); 
    $(this).text($(this).text() == "Show Menu" ? "Hide Menu" : "Show Menu"); 
}); 
</script>

的CSS

.medianavbttn { 
position: relative; 
display:block; 
width: 100%; 
height: 30px; 
top: 0; 
left: 0; 
margin: 0; 
padding: 5px 0 5px; 
text-align: center; 
cursor: pointer; 
z-index: 999; 
} 

#mediabody .nav-wrapper { 
display: none; 
height: auto; 
} 

.medianav { 
position: relative; 
display: block; 
width: 100%; 
padding: 35px 0 5px; 
text-align: center; 
z-index: 998; 
} 

#medianav-links { 
position: relative; 
display: block; 
overflow: visible; 
width: 100%; 
text-align: center; 
list-style: none; 
z-index: 997; 
} 

#medianav-links li { 
width: 60%; 
height: 30px; 
position: relative; 
display: block; 
margin: 2% auto 0; 
padding: 5px; 
text-align: center; 
}

来源

2013-10-04 Igor Laszlo

要查看我在我的网站上讨论的内容：http://www.igorlaszlo.com/mobile.html –

或者是否可以将“.medianav”放在按钮内？在这种情况下，它会变得粘滞和隐藏在同一时间...也许这是我的解决方案... –

你可以尝试寻找通过jQuery的.animate（），看看是否能找到你的动画像

来源

2013-10-04 20:01:24 krilovich

是的，我发现这个网页已经，我现在看几个小时，但因为我不是专家的JavaScript，我不明白从它。我以为我可以操纵动画，在加载后执行动画，但我知道在代码中写什么和如何编写... –

使用JQuery显示/隐藏和粘贴导航

回答

相关问题