<script type="text/javascript">
(function($){
var ele_fix = $("#div_right"); //浮动窗口
var _main = $(".main"); //浮动区域
var ele_offset_top = ele_fix.offset().top; //浮动区域高度
$(window).scroll(function(){
var scro_top = $(this).scrollTop(); //当前高度
var fix_foot_pos = parseInt(ele_fix.height())+parseInt(scro_top)-10; //浮动框最底部到最顶部高度
var mainpos = parseInt(_main.offset().top)+parseInt(_main.height());
if(scro_top <= ele_offset_top&&fix_foot_pos<mainpos){
ele_fix.css({position: "static", top: -10});
}else if(scro_top>ele_offset_top&&fix_foot_pos<mainpos){
ele_fix.css({position: "fixed", top: -10});
}else if(scro_top>ele_offset_top&&fix_foot_pos>mainpos){
var posi = mainpos-fix_foot_pos-10;
ele_fix.css({position: "fixed", top: posi});
}
});
/*
//方案二
$(window).bind("scroll
js 固定悬浮效果
最新推荐文章于 2021-06-04 15:25:49 发布
这篇博客介绍了如何使用jQuery实现一个固定悬浮效果。通过获取元素的offset().top值,监听window的scroll事件,动态计算元素位置并设置CSS属性,确保元素在页面滚动时始终保持在屏幕的特定位置。提供了两种不同的实现方案,帮助开发者实现页面滚动时固定元素的效果。
摘要由CSDN通过智能技术生成