Question

我有一个显示/隐藏div（“.medianav”）的bttn（“.medianavbttn”）。我的网页是针对移动设备的，因为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/

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

1 个答案: