javascript - How to make the position of the fixedly positioned sidebar in the page dynamically increase with the scroll bar?
高洛峰
高洛峰 2017-06-26 10:53:43
0
2
959

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...

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

reply all(2)
typecho

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/

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template