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