0

div (「.medianav」) を表示/非表示にする bttn (「.medianavbttn」) があります。私の Web ページはモバイル デバイス用であり、display:fixedCSS コードが動作しないため、代わりに jquery スティッキー ナビゲーションを使用して、ページの上部に貼り付けます。ボタンだけでなく、ナビゲーションも貼り付けたいのでdisplay: hidden、「medianav」も必要です。問題は、この場合、仮想ラッパーの高さがコンテンツなしで表示されるため、ページが押し下げられて見苦しいことです。「medianav」を非表示にする代わりに、仮想ラッパーdisplay: hiddenを作成したので、ナビゲーションの高さは問題ありません。BUT : 仮想ラッパーがすぐに表示されないため、ナビゲーションを開くと、スライド トグルの「スイング」アニメーションがスムーズではありません。

スムーズにアニメーション化する方法を誰か教えてもらえますか? または、それが不可能な場合、貼り付けられたボタンをクリックしてページ内外にナビゲーションをスクロールするには、どの方法を使用すればよいですか?

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

1 に答える 1