进阶方法有个好处就是悬浮前和滚动悬浮后的样式都可以自定义,比如没有滚动到设置的元素时,样式的宽度是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

发表评论

后才能评论