The requirement is like this. At the beginning, the sidebar of the page is fixed at a certain position on the page (such as: right:0;bottom:0). As the scroll bar scrolls, in order to prevent the sidebar from folding the footer Part (refer to the picture below), when it reaches a certain position, the value of bottom increases with the increase of the scroll bar. The effect is similar to that of the Qidian Chinese website. The code is as follows. Please God, my bottom only increases by one and it stops moving!
code show as below:
//滚动条监听事件
$(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);
}
})
The specific effect display of Qidian Chinese website: http://read.qidian.com/chapte...
No need to keep adding, it is a waste of resources. Use fixed positioning, and then change to absolute positioning or other methods to position it to the bottom.
Let’s see if this works.
https://jsfiddle.net/eyvxw3wc/