如何使用jQuery slidetoggle方法按下內容而不是重疊內容來制作固定導航欄？

Question

我想知道是否有人可以幫我找到解決這個問題的方法。 我目前正在設計一個響應式移動網頁，我目前在滾動時有一個固定的導航欄，帶有jQuery滑動切換方法，可以擴展菜單。

我的問題是，當我點擊“菜單觸發器”按鈕時，菜單不會像我希望的那樣按下其他內容，菜單會重疊其下面的內容。

我試過在這里和其他地方尋找答案，但我找不到明確的答案。 如果已經發布，我很抱歉。

我沒有在這篇文章上發布任何代碼，但這是一個假設的jfiddle，我復制了同樣的問題。 我希望有人可以提供幫助，我已經准備好撕掉我的頭發！

 jQuery(document).ready(function() { jQuery(".menu-trigger").click(function() { jQuery(".menu-bar ul").slideToggle(); }); });

 /*For Scrolling Purposes*/ body { background:url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2O8dOnSfwYg0NPTYwTRuAAj0QqxmYBNM1briFaIzRbi3UiRZ75uNgUHGbfvabgfsHqGaIXYPAMAD8wgC/DOrZ4AAAAASUVORK5CYII= ) repeat; height: 2000px; } .menu-bar { position: fixed; top: 0; width: 100%; background: orange; } .menu-bar ul { display: none; } .content { margin-top: 50px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <!--Menu Bar Div--> <div class="menu-bar"> <div class="menu-trigger"> <p> Button </p> </div><!--/Menu Trigger--> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div><!--/Menu Bar--> <!--Content Div--> <div class="content"> <ul> <li>Some Content</li> <li>Some Content</li> <li>Some Content</li> <li>Some Content</li> </ul> </div><!--/Content--> </body>

這是jfiddle鏈接。 https://jsfiddle.net/Lq7qqnn9/

背景：非常好用HTML和CSS而不是javascript！

Answer 1

一種選擇是使用占位符項而不是內容的邊距。 IE在固定塊后面添加一個塊，用它固定的疊加層保持高度。

 jQuery(document).ready(function() { jQuery(".menu-trigger").click(function() { $(".menu-placeholder").css("height", $(".menu-bar").height()); jQuery(".menu-bar ul").slideToggle({ progress: function() { $(".menu-placeholder").css("height", $(".menu-bar").height()); } }); }); });

 /*For Scrolling Purposes*/ body { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2O8dOnSfwYg0NPTYwTRuAAj0QqxmYBNM1briFaIzRbi3UiRZ75uNgUHGbfvabgfsHqGaIXYPAMAD8wgC/DOrZ4AAAAASUVORK5CYII= ) repeat; height: 2000px; } .menu-placeholder { width: 100%; height: 50px; } .menu-bar { position: fixed; top: 0; width: 100%; background: orange; } .menu-bar ul { display: none; } .content {}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <!--Menu Bar Div--> <div class="menu-bar"> <div class="menu-trigger"> <p> Button </p> </div> <!--/Menu Trigger--> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> <!--/Menu Bar--> <!--Content Div--> <div class="menu-placeholder"></div> <div class="content"> <ul> <li>Some Content</li> <li>Some Content</li> <li>Some Content</li> <li>Some Content</li> </ul> </div> <!--/Content--> </body>

如何使用jQuery slidetoggle方法按下內容而不是重疊內容來制作固定導航欄？

問題描述

1 個解決方案

解決方案1
0 已采納 2016-05-07 04:23:50

如何使用jQuery slidetoggle方法按下內容而不是重疊內容來制作固定導航欄？

問題描述

1 個解決方案

解決方案1 0 已采納 2016-05-07 04:23:50

解決方案1
0 已采納 2016-05-07 04:23:50