2

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

    $(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

如何修改现有脚本以允许这样的事情？

4

1 回答 1

0

您可以在添加固定 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');
    }
   }
 });
于 2012-12-13T20:35:38.223 回答