[进阶方法]JS+CSS滑动到某位置元素固定住不动或滚动到顶部然后固定的进阶方法

进阶方法有个好处就是悬浮前和滚动悬浮后的样式都可以自定义，比如没有滚动到设置的元素时，样式的宽度是100px，然后当用户滚动屏幕到设置的元素时，设置的元素就可以又以另一种自定义样式悬浮停留起来，悬浮的位置自定义，宽度也可以自定义到100%，比直接用CSS控制更丝滑！

 

JavaScrip代码

var mt = 0;
window.onload = function () {
    var mydiv = document.getElementById("xulgr-pay-nav"); //前端对应id
    var mt = mydiv.offsetTop;
    window.onscroll = function () {
        var t = document.documentElement.scrollTop || document.body.scrollTop;
		if (t > mt) {
			mydiv.style.position = "fixed"; //悬浮
			mydiv.style.zIndex="1"; // CSS使用z-index:1 强制不被遮掩
			mydiv.style.background = "#f2f2f2"; //悬浮层背景色
			mydiv.style.padding = "8px 5px 8px 5px"; //悬浮层内径
			mydiv.style.top = "50px"; //悬浮层距顶
			mydiv.style.left = "0"; //悬浮层距左
			mydiv.style.right = "0"; //悬浮层距右
			mydiv.style.width = "100%"; //悬浮层宽度
		} else {
			mydiv.style.position = "static"; //不悬浮
			mydiv.style.background = "transparent"; //悬浮层透明背景
			mydiv.style.padding = "auto"; //悬浮层内径值继承
		}
    }
}

HTML直接在元素中加入id，例如上面示例的id=”xulgr-pay-nav”

 

下方演示demo是我的模板站，其中的查看演示按钮、微信支付按钮和支付宝支付按钮，在滚动时会直接停留在顶部，并且从内块width到悬浮宽度会有所变化。

查看DEMO