滑動導航菜單（sliiide.js）部分地工作

Question

我試圖滑動導航菜單。我正在使用sliiide.min.js。當我停留在頁面頂部時，下列設置有效，但當我向下滾動並單擊滑動菜單時，它會在實際菜單中顯示空白部分，但我無法弄清楚如何排列。如果您之前遇到類似問題，請分享。我提供完整的代碼。

HTML菜單

<div id="tablet-mobile-menu" class="sidr left" style="visibility: hidden; display: block; left: 0px;"> 
    <div class="utility-nav"> 
     <div class="main-menu"> 
      <ul id="burger-menu" class="links clearfix"> 
       <li class="menu-15461 first"> 
        <a href="" id="hamburger-subscribe" class="burger" style="color: #fc0; text-transform: uppercase;">Follow Us On</a> 
       </li> 
       <div class="utility-menu"> 
        <ul id="hamburger-utility-menu" class="links clearfix"> 
         <li class="menu-7731 first"> 
          <a href="" id="facebook" class="facebook burger">Facebook</a> 
         </li> 
          <a href="" id="pinterest" class="pinterest burger">Pinterest</a> 
         </li> 
        </ul> 
       </div> 
       <li class="menu-15461 first" style=""> 
        <a href="" id="hamburger-subscribe" class="burger" style="color: #fc0; text-transform: uppercase;">Sections</a> 
       </li> 
      </ul> 
     </div> 
      <p>Men's Health, The Brand Men Live By</p> 
      <p>Copyright © 2016 Rodale Inc. No reproduction, transmission or display is permitted without the written permissions of Rodale Inc.</p> 
      <p> 
       <a href="">Privacy Policy.</a>&nbsp;&nbsp;&nbsp; 

       <a href="">About Us.</a> 
      </p> 
     </div> 
    </div> 

這裏是JS配置：

<?php $this->script()->captureStart(); ?> 

            var settings = { 
            toggle: "#menu-btn-toggle", // the selector for the menu toggle, whatever clickable element you want to activate or deactivate the menu. A click listener will be added to this element. 
            exit_selector: ".is-active", // the selector for an exit button in the div if needed, when the exit element is clicked the menu will deactivate, suitable for an exit element inside the nav menu or the side bar 
            animation_duration: "0.1s", //how long it takes to slide the menu 
            place: "left", //where is the menu sliding from, possible options are (left | right | top | bottom) 
            animation_curve: "cubic-bezier(0.54, 0.01, 0.57, 1.03)", //animation curve for the sliding animation 
            body_slide: true, //set it to true if you want to use the effect where the entire page slides and not just the div 
            no_scroll: true, //set to true if you want the scrolling disabled while the menu is active 
            }; 

            $('#tablet-mobile-menu').sliiide(settings); //initialize sliiide 



<?php $this->script()->captureEnd(); ?> 

這裏就是點擊或切換按鈕所在的HTML：

<div id="menu-btn"> 
    <a href="/" title="Menu" id="menu-btn-toggle" class="clickable"> 
     <!--<i class="fa fa-bars fa-2x" aria-hidden="true"></i>--> 
     <!--<i class="fa fa-times fa-2x" aria-hidden="true"></i>--> 
     <span></span> 
    </a> 
</div> 

Answer 1

也許滑塊它只是坐在頁面的頂部，所以你看到的是菜單的底部。

您是否嘗試將CS​​S樣式添加到導航頂部，以便即使在滾動時它也會粘貼到頁面的頂部。

.sticky { 
    position: fixed; 
    width: 100%; 
    left: 0; 
    top: 0; 
    z-index: 100; 
    border-top: 0; 
}