先展示下,最简短的jquery实现方式
// 获取元素距页面的高
var info_head_top = $("#info_head").offset().top;
// 监听页面滚动
$(document).scroll(function(){
// 获取页面滚动距离
var scrtop = $(this).scrollTop()
if(scrtop>info_head_top){
$("#info_head").removeClass("not_float").addClass("float");
$("#back").show(); // 开始占位
}
else{
$("#info_head").removeClass("float").addClass("not_float");
$("#back").hide(); // 占位结束
}
});
上面逻辑看的懂得小伙伴们,后面的啰里啰嗦就可以不用看啦
用js简单实现一个非常实用的小功能,元素置顶悬浮
即,当页面滚动,元素到达浏览器顶部时,元素悬浮固定于顶部
展示一下具体效果
具体实现思路:
1.获取元素距离页面顶部的距离 = ele_top
2.监听页面滚动
3.当页面滚动距离超过 ele_top
改变元素样式,设为固定定位 “postion: fiexd”
4.当页面滚动距离小于 ele_top
改回绝对定位
因为相对定位与固定定位,位置不同,所以把两种情况的css封装成两个类
改变元素类名,就能完成效果
// 设置悬浮效果
// 获取 ele_top
var info_head_top = $("#info_head").offset().top;
// 监听页面滚动
$(document).scroll(function(){
// 获取页面滚动距离
var scrtop = $(this).scrollTop()
// 开始悬浮
if(scrtop>info_head_top){
$("#info_head").removeClass("not_float").addClass("float");
$("#back").show(); // 开始占位
// 取消悬浮
else{
$("#info_head").removeClass("float").addClass("not_float");
$("#back").hide(); // 占位结束
}
});
$("#back").show(); // 开始占位
$("#back").hide(); // 占位结束
当scrtop>info_head_top == true 的一瞬间,因为有元素被浮起不占位,后面的元素会弹上去,这时候,需要个占位元素,阻止这种现象
占位元素样式与需要悬浮的元素完全一样,加上”display: none”即可