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': barWidt