元素跟随着滚动条运动

Posted zhangyx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了元素跟随着滚动条运动相关的知识,希望对你有一定的参考价值。

有这种情况,页面中的某些元素需要跟随滚动条运动,位置一直在页面中的某个位置;

思路:

当页面滚动的时候,一直获取滚动条距离顶部的距离,当顶部的距离等于某个数值的时候,直接开始改变这个元素的position的值为fixed,不等于这个数值的时候为relative;

注意的是需要在html中写一个和这个元素一样的元素,不等于数值的这个元素为display:none,等于数值的这个元素为display:block。这个是为了防止当需要固定的元素

脱离文档流的时候,下面的元素向上移动,为了占位置的;

主要的代码

$(function(){
            $(window).scroll(function(){
                var sctop=$(document).scrollTop();
                if(sctop>=200){
                    $(".ding").css({
                        "position":"fixed",
                        "left":"0px",
                        "top":"0px"
                    });
                    $(".ding-no").css({
                        "display":"block"
                    });
                }else{
                    $(".ding").css({
                        "position":"relative",
                        "left":"0px",
                        "top":"0px",
                        
                    });
                    $(".ding-no").css({
                        "display":"none"
                    });
                }
            });
        });

全部的代码的位置:

https://github.com/GainLoss/permanent-position

以上是关于元素跟随着滚动条运动的主要内容,如果未能解决你的问题,请参考以下文章

元素随着滚动条滚动而滚动,但是到浏览器窗口顶部的距离是固定的功能代码

“右侧悬浮框”页面特效

在可拖动事件上,元素随着滚动条窗口顶部的高度向下移动

怎么让DIV固定在页面的某个位置而不随着滚动条随意滚动?

网页设计如何设置网页部分内容不随着滚动条而移动移动?

如何在 MS Word 文档中显示代码片段,因为它在 *** 中显示(滚动条和灰色背景)