滾動上點擊

Question

我已經建立了一個移動的菜單（），其中包括一個鏈接（#bottom-section），其切換DOM中的子菜單（#support-us-nav），但它是不可見的，直到用戶向下滾動。

我試圖修改我的jQuery，它切換子菜單，也滾動主菜單，這是部分工作。主菜單在點擊時向下滾動，但它一直滾動到底部，直到它到達子菜單的底部，這是主菜單中的最後一個元素。我希望主菜單滾動，直到子菜單的頂部到達視口的頂部。

$('#bottom-section').on('click', function(event) { 
    event.stopPropagation(); 
    $('#support-us-nav').fadeToggle(); 
    $('#lc-nav .menu-wrap').animate({ 
    scrollTop: $('#support-us-nav').offset().top 
    }, 1000); 

}); 

HTML結構：

<div class="menu-wrap"> 
    <div class="menu-sidebar"> 
    <div id="nav-account" class="mobile-only"></div> 
    <ul id="top-section" class="submenu"></ul> 
    <ul id="middle-section" class="submenu"></ul> 
    <ul id="bottom-section" class="submenu"></ul> 
    <div id="support-us-nav"></div> 
    </div> 
</div> 

Answer 1

從codepen更正代碼。您嘗試對上的scrollTop進行動畫處理，而該高度沒有固定。我假設你打算將它延伸到屏幕的整個高度，因此position:fixed;還添加了偏移頂部更正，因爲它是相對於其固定父對象計算的。

$('#bottom-section').on('click', function(event) { 
 
    $('#support-us-nav').fadeToggle(); 
 
    $('.menu-wrap').animate({ 
 
    scrollTop: $('#support-us-nav').offset().top + 350 
 
    }, 1000); 
 

 
});

.menu-wrap { 
 
     position: fixed; 
 
     overflow-y: scroll; 
 
     z-index: 500; 
 
     top: 0; 
 
     width: 280px; 
 
     height: 100%; 
 
     transition: 0.25s; 
 

 
     .menu-sidebar { 
 
      position: relative; 
 
      padding: 30px; 
 

 
      #nav-account.mobile-only { 
 
       display: flex; 
 
       justify-content: space-between; 
 
       padding: 0 15px 30px; 
 
      } 
 

 
      li > a { 
 
       position: relative; 
 
       opacity: 1; 
 

 
       &:hover::after { 
 
        background-position: -100% 0; 
 
       } 
 
      } 
 

 
      .menu-item-has-children { 
 
       position: relative; 
 

 
       .sub-menu { 
 
        display: none; 
 
       } 
 
      } 
 

 
      ul.submenu { 
 
       padding-bottom: 30px; 
 

 
       &:hover li { 
 
        opacity: 0.5; 
 

 
        &:hover { 
 
         opacity: 1; 
 
        } 
 
       } 
 
      } 
 

 
      #top-section { 
 
       li { 
 
        padding: 10px 15px; 
 

 
        a { 
 
         display: flex; 
 
         justify-content: space-between; 
 
         align-items: center; 
 

 
         img { 
 
          display: inline-block; 
 
          width: 25px; 
 
         } 
 
        } 
 
       } 
 
      } 
 

 
      #middle-section { 
 
       li { 
 
        padding: 3px 15px; 
 
        line-height: 1; 
 
       } 
 
      } 
 

 
      #bottom-section { 
 
       li { 
 
        padding: 0 15px; 
 
       } 
 
      } 
 
     } 
 
    } 
 

 
#support-us-nav { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="menu-wrap"> 
 
    <div class="menu-sidebar"> 
 
    <div id="nav-account" class="mobile-only">Some text</div> 
 
    <ul id="top-section" class="submenu"> 
 
     <li>Link</li> 
 
     <li>Link</li> 
 
     <li>Link</li> 
 
     <li>Link</li> 
 
     <li>Link</li> 
 
     <li>Link</li> 
 
     <li>Link</li> 
 
     <li>Link</li> 
 
     <li>Link</li> 
 
     <li>Link</li> 
 
     <li>Link</li> 
 
     <li>Link</li> 
 
     <li>Link</li> 
 
     <li>Link</li> 
 
     <li>Link</li> 
 
     <li>Link</li> 
 
     <li>Link</li> 
 
     <li>Link</li> 
 
     <li>Link</li> 
 
     <li>Link</li> 
 
    </ul> 
 
    <ul id="middle-section" class="submenu"> 
 
     <li>Link</li> 
 
     <li>Link</li> 
 
     <li>Link</li> 
 
     <li>Link</li> 
 
     <li>Link</li> 
 
    </ul> 
 
    <ul id="bottom-section" class="submenu"> 
 
     <li>Tigger Link</li> 
 
    </ul> 
 
    <div id="support-us-nav"> 
 
     <li>Support Us Nav Link</li> 
 
     <li>Support Us Nav Link</li> 
 
     <li>Support Us Nav Link</li> 
 
     <li>Support Us Nav Link</li> 
 
     <li>Support Us Nav Link</li> 
 
     <li>Support Us Nav Link</li> 
 
     <li>Support Us Nav Link</li> 
 
     <li>Support Us Nav Link</li> 
 
     <li>Support Us Nav Link</li> 
 
     <li>Support Us Nav Link</li> 
 
     <li>Support Us Nav Link</li> 
 
     <li>Support Us Nav Link</li> 
 
     <li>Support Us Nav Link</li> 
 
     <li>Support Us Nav Link</li> 
 
     <li>Support Us Nav Link</li> 
 
     <li>Support Us Nav Link</li> 
 
     <li>Support Us Nav Link</li> 
 
     <li>Support Us Nav Link</li> 
 
     <li>Support Us Nav Link</li> 
 
     <li>Support Us Nav Link</li> 
 
     <li>Support Us Nav Link</li> 
 
     <li>Support Us Nav Link</li> 
 
     <li>Support Us Nav Link</li> 
 
     <li>Support Us Nav Link</li> 
 
     <li>Support Us Nav Link</li> 
 
     <li>Support Us Nav Link</li> 
 
     <li>Support Us Nav Link</li> 
 
     <li>Support Us Nav Link</li> 
 
     <li>Support Us Nav Link</li> 
 
     <li>Support Us Nav Link</li> 
 
    </div> 
 
    </div> 
 
</div>