fixed 宽度超过内容页面_position Fixed on 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,同时设置纵向滚动条