使用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顯示/隱藏和粘貼導航

回答

相關問題