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

Question

我有一个 bttn（“.medianavbttn”），它显示/隐藏一个 div（“.medianav”）。我的网页适用于移动设备，由于display:fixed css 代码在它们上不起作用，我使用 jquery 粘性导航代替，所以我将它贴在页面顶部。 因为我也想坚持导航，不仅是按钮，我也必须display: hidden“medianav”。问题是在这种情况下，它的虚拟包装器的高度会出现没有任何内容，所以它把我的页面往下推，很丑。 我没有隐藏“medianav”，而是创建了虚拟包装器display: hidden，因此导航高度现在可以了。但是：由于虚拟包装器不立即可见，当我打开导航时，滑动切换“摆动”动画不流畅。

有人可以告诉我如何使动画平滑吗？ 或者，如果不可能，我应该使用哪种方法通过单击固定按钮来滚动导航进出页面？

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;
}

Answer 1

您可以尝试通过 jQuery .animate() 查看是否可以找到您喜欢的动画

http://api.jquery.com/animate/