jquery - 允许固定垂直菜单在达到一定长度后滚动

Question

我有一个页内导航菜单，当您通过我从其他地方挪用的以下代码向下滚动时，该菜单会切换到固定位置:

    $(document).ready(function () {
          var top = $('#toc2').offset().top - parseFloat($('#toc2').css('marginTop').replace(/auto/, 0));

$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();

// whether that's below the form
if (y >= top) {
  // if so, add the fixed class
  $('#toc2').addClass('fixed');

} 

else {
  // otherwise remove it
  $('#toc2').removeClass('fixed');
}
 });
});

CSS 样式:

#toc2Wrapper { 
 left: 960px;
 position: absolute;
 width: 200px;
font-size:11px;

}

#toc2 {
 position: absolute;
 top: 0;
 background: #FFF;
 padding:3px;
 width: 200px;
 border: 1px solid #E0E0E0;
}

#toc2.fixed {
 position: fixed;
 top: 0;
 }

我的问题是，如果在菜单中切换多个项目，则根据页面内容的性质，页内导航可能会变得相当大。这意味着菜单的长度可以超出窗口底部，并且由于固定位置脚本而变得无法访问(除非其他部分再次折叠)。

我希望能够让菜单在其内部滚动，或者如果底部超出窗口顶部，则允许其从窗口顶部变得不固定，而不是依赖于一次一节的 Accordion 菜单窗口底部。

Android 的网站上有一个很好的例子来说明我想要实现的目标。在相对较短的窗口中展开“应用程序组件”，菜单中会出现一个滚动条:

https://developer.android.com/guide/components/index.html

如何修改现有脚本以允许类似的操作？

Answer 1

在添加固定 div 类之前，您可以在函数中测量并比较窗口高度和 #toc2 高度

$(window).scroll(function (event) {
  // what the y position of the scroll is
  var y = $(this).scrollTop();

  // get your window and toc heights
  var windowheight = $(this).height();
  var tocheight = $('#toc2').height();

  // compare heights
  if(windowheight > tocheight) {
    // only runs add/remove fixed if window height is greater than #toc2
    if (y >= top) {
      // if so, add the fixed class
      $('#toc2').addClass('fixed');
      } 
  else {
    // otherwise remove it
    $('#toc2').removeClass('fixed');
    }
   }
 });