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;
 }

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

我希望能够让菜单在其内部滚动，或者如果底部延伸超出窗口顶部，则可以让它从窗口顶部变得不固定，而不是依赖于一次一个部分的手风琴菜单。窗户的底部。

Android的网站就是我想要实现的目标。在相对较短的窗口中展开“App Components”，并显示菜单的滚动条：

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');
    }
   }
 });

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

1 个答案: