有这种情况,页面中的某些元素需要跟随滚动条运动,位置一直在页面中的某个位置;
思路:
当页面滚动的时候,一直获取滚动条距离顶部的距离,当顶部的距离等于某个数值的时候,直接开始改变这个元素的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