文章目录

• 右侧目录相对定位
• 右侧目录初始绝对定位滚动后计算位置
• fixed下内容超出高度出现Scroll

之前写过一篇 关于css相对定位不跟随滚动条移动点击查看.
正如我的博客内容页右侧目录的效果.
垂直滚动内容时,右侧目录始终定位在右上角不跟随滚动条.
但是,
当我的目录足够长,因为它不跟随滚动条垂直移动,
导致超出屏幕的部分无法看到.

右侧目录相对定位

'position': 'fixed',
'top': 25px,
'width': 400px

top 25px 是因为我的博客顶部菜单高度25px,所以为了不让菜单遮挡右侧目录,所以距离顶部25px
但是页面初始化后,我们并不想直接让目录相对定位到右上角,
因为右上角还有需要展示的模块,
我们更希望是滚动条滚动到目录模块时,这个模块始终相对定位始终停留在右上角.

右侧目录初始绝对定位滚动后计算位置

    var $elm = $('#catelog');
    const barWidth = $('#ad').css('width');
     var startPos = $elm.offset().top;
     $(window).scroll(function () {
       var p = $(window).scrollTop();
       if (p > startPos - 68) {
         $elm.css({
           'position': 'fixed',
           'top': 25,
           'width': barWidth
         });
       } else {
         $elm.css({
           'position': 'relative',
           'top': '0px'
         });
       }

注意:需要引用jquery
$(window).scroll(function (){ //这里是监视滚动条滚动时的事件})
p 是当前滚动条滚动的距离
startPos 是博客目录元素距离浏览器可视化顶部距离
68是博客顶端飘浮菜单栏的高度

if (p > startPos - 68)
说明右侧目录元素顶部刚刚触碰到飘浮的顶部菜单栏底部时,
目录元素被设置成相对定位
'width': barWidth
元素宽度是根据上面左侧广告的的宽度动态计算的,
因为博客做了各种设备的适配,随着可视化窗口变化大小,
右侧模块宽度动态变化.

这样会遇到另外一个问题
当目录内容足够长,高度超出目录元素高度时,底部隐藏的内容无法看到(因为目录模块是相对定位,漂浮在右侧)
所以我们需要滚动内容来查看

fixed下内容超出高度出现Scroll

当内容高度大于元素在窗口的可视化高度时,内容div出现滚动条

    var $elm = $('#catelog');
     const barWidth = $('#ad').css('width');
      var startPos = $elm.offset().top;
      
      var $content = $('#catelog_content'); //新增
      const catelogHeight = parseInt($('#catelog_content').css('height'));  //新增
      $(window).scroll(function () {
      
      --------新增
      if (catelogHeight >= 460) {
          $content.css({
            'height': '460px',
            'overflow-y': 'scroll'
          });
        }
        ------新增
        
        var p = $(window).scrollTop();
        if (p > startPos - 68) {
          $elm.css({
            'position': 'fixed',
            'top': 25,
            'width': barWidth
          });
        } else {
          $elm.css({
            'position': 'relative',
            'top': '0px'
          });
        }

留意上方新增的几行代码
var $content = $('#catelog_content'); 这是目录模块内的加载列表元素的div容器
const catelogHeight = parseInt($('#catelog_content').css('height'));
获取列表元素div容器的高度,因为返回的是 xxpx,
parseInt只是把 xxpx转化成整数xx

          $content.css({
            'height': '460px',
            'overflow-y': 'scroll'
          });
        }

当列表元素高度大于460的时候,
固定列表元素外div容器高度为 460px,同时设置纵向滚动条

出自:position Fixed on Scroll 相对定位时内容超出范围出现滚动条