文章详情页
javascript - 怎么让页面中固定定位的侧边栏的位置随着滚动条动态增加呢?
问题描述
需求是这样的,一开始页面的侧边栏是固定在页面的某一位置(如:right:0;bottom:0),随着滚动条的滚动,为了防止侧边栏折叠页脚部分(参考下图),到一定位置,bottom的值随身滚动条的增加而增加,效果类似起点中文网的效果,代码如下,求大神,我的bottom只增加一个就不动了!代码如下:
//滚动条监听事件$(window).scroll(function () { var sTop = $(document).scrollTop(); var Bottom = 100;//设置底部距离 if (sTop >= 1738) {Bottom++;//不断增加$('.main .main_p').css('bottom',Bottom);//设置固定侧边框位置 }else{$('.main .main_p').css('bottom',0); }})
起点中文网的具体效果展示:http://read.qidian.com/chapte...
问题解答
回答1:不必不断增加,很浪费资源。用 fixed 定位,判断到底了之后换 absolute 定位或其它方式定位到底部。
回答2:看看这样行不行. https://jsfiddle.net/eyvxw3wc/
标签:
JavaScript
上一条:javascript - js如何实现这种操作,get(obj,’k1’,’k2’,’k3’).then((v)=>console.log(v))下一条:javascript - sublime已经安装了babel插件和sublimelinter-jshint为什么还是显示es6语法错误?
相关文章:
1. PHP中的$this代表当前的类还是方法?2. javascript - vue2.0中使用vue2-dropzone的demo,vue2-dropzone的github网址是什么??百度不到。3. 鼠标过导航标签时,无效果,请问如何查找问题4. javascript - avalon.js ms-on 事件绑定无效 ?5. html - 这种错位的时间轴怎么布局,然后用css实现?6. html5 - 目前 公司App 嵌入H5页面 做个 手机支付功能 没有做过 所以 请求各位有经验的 给个思路7. java - spring-data Jpa 不需要执行save 语句,Set字段就可以自动执行保存的方法?求解8. IOS app应用软件的id号怎么查询?比如百度贴吧的app-id=4779278139. java - butterknife怎么绑定多个view10. java - 如图代码,Collection 类中的iterator()是抽象方法,为什么可以调用?
排行榜