js设置div高度低于滚动高度时固定

今天在电脑端看csdn时，发现文章界面一般分为三大块：左边侧边栏显示用户基本信息和广告、中间文章部分、右边用户的文章专栏。整体用的是float。右边的文章position设置为fixed。左边侧边栏是当滚动高度超过侧边栏高度时，设置为fixed，即这时候侧边栏保持不变，bottom=0

    let aside = document.getElementsByClassName('aside')[0]let asideTop = aside.offsetToplet asidescroll = document.body.scrollToplet asideBottom = aside.offsetTop + aside.clientHeightwindow.addEventListener('scroll', function() {let screenBottom =document.documentElement.scrollTop +document.documentElement.clientHeight //获取当前界面距离顶部的高度if (asideBottom < screenBottom) {aside.classList.add('fixed')} else {aside.classList.remove('fixed')}})

在写右边栏position:fixed时出现了一点问题
跟着CSDN模仿着写的。
在设置右边recommend时，高度设置height:100%时，会出错。
这是因为flex布局的问题，flex布局内即使形状上被子元素撑开了，但是实际上还是没有撑开的。

因为整个页面是flex，使用了
justify-content:center
align-item:center

js设置div高度低于滚动高度时固定相关推荐

js获取div的宽度和高度的坑
元素尺寸属性说明 clientWidth 获取元素可视部分的宽度,即 CSS 的 width 和 padding 属性值之和,元素边框和滚动条不包括在内,也不包含任何可能的滚动区域 clientHe ...
js判断div滚动条是否滚动到底部
1.设置div固定高度,并且设置为内部超出可滚动 2.获取div标签,并获取div滚动距离顶部的高度 3.获取div的高度,如果没有给div设置高度可获取视图窗口的高度 4.获取div标签滚动高度 4 ...
怎么获取网页高度、屏幕高度、滚动高度？
有时候需要取页面的底部, 就会用到document.body.clientHeight , 在HTML 标准中(这一句就能取到整个页面的高度, 不论body 的实际内容到底有多高. 在XHTML中, ...
如何获取网页高度、屏幕高度、滚动高度？
有时候需要取页面的底部,就会用到 document.body.clientHeight,在HTML标准中这一句就能取到整个页面的高度,不论 body 的实际内容到底有多高. 在XHTML中,如果bod ...
jquery js 设置 div 的内容，给 div 添加一个属性
设置 div 的内容的写法: jquery 的写法: $( "#div1" ).html( "aa" ); // 将 div1 元素里面的 html ...
js设置div透明度
原生js设置透明度为了兼容IE与其他浏览器对透明度的设置,我们需要对以上两种样式分别进行设置: 复制代码代码如下: var alpha = 30; //透明度值变量 var oDiv = docum ...
js实现table表头冻结（scroll时固定）
方案一: 思路:当table在父容器中滑动滚动条显示内容时,使用scrollTop判断边界,同时使用JQuery中的clone方法,把原table创建复制一份,插入到动态创建的一个div中,再将该di ...
设置div table 等元素高度宽度百分之一百 100% 无效解决办法...
很多人都遇到这个问题,却不得而解需要当前元素的父元素height width 指定了一个数值或者百分比还有就是在有的浏览器的 body html元素height width 为0,body子元素指 ...
原生js设置div隐藏或者显示_JavaScript动画方式控制div元素的隐藏和显示
jQuery实现此功能相对比较简单,具体参阅点击按钮动画方式隐藏和显示div一章节. 结合CSS3实现此功能也非常便利和适合,具体参阅JavaScript与CSS3动画方式改变元素尺寸一章节. 原生J ...

js设置div高度低于滚动高度时固定

js设置div高度低于滚动高度时固定相关推荐

最新文章

热门文章