最新消息:文章中包含代码时,请遵守代码高亮规范!

页面滑动到一半的时候固定【原创】

HTML+CSS Niki 144浏览 0评论

类似这种效果

第一张是没有滑动之前和滑动套顶部的效果

第二张是滑动之后的效果

思想是这样的当页面的滚动条的高度大于0的时候(就表示页面上滑了)

这时候可以使用scroll方法使想要固定的部门position:fixed

但是我们还是需要滑回顶部的,这时候就需要吧固定的部分的position:fixed的修改为relative

这就是此段代码的思想,大家可以根据页面的实际情况进行修改

以下附上代码


$(function(){
//获取要定位元素距离浏览器顶部的距离
var navH = $(".index-block").offset().top;
//滚动条事件
$(window).scroll(function(){
//获取滚动条的滑动距离
var scroH = $(this).scrollTop();
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定
if (scroH > navH) {
$(".index-block").css({"position": "fixed", "top": "-60px", "background": '#000', "height": '295px'});//这些都是样式可按照实际情况
$(".index-content").css({"padding-top": "240px"});
}
if (scroH == 0) {//以下是滑动到头部的时候还原初始状态
$(".index-block").css({"position": "relative", "top": "0", "background": 'none', "height": '200px'});
$(".index-content").css({"padding-top": "105px"});
}
})
});

转载时请注明出处及相应链接,本文永久地址:http://blog.it985.com/22564.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Niki的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!