js 固定悬浮效果

最新推荐文章于 2021-06-04 15:25:49 发布

open520yin

最新推荐文章于 2021-06-04 15:25:49 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/openn/article/details/8778960

js 专栏收录该内容

11 篇文章

订阅专栏

这篇博客介绍了如何使用jQuery实现一个固定悬浮效果。通过获取元素的offset().top值，监听window的scroll事件，动态计算元素位置并设置CSS属性，确保元素在页面滚动时始终保持在屏幕的特定位置。提供了两种不同的实现方案，帮助开发者实现页面滚动时固定元素的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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",function() {
	 	var temp = '1165';
	 	//判断往下滚
	 	if ($(document).scrollTop() > temp) {   //如果大于这个高度，就置顶
	 		flag = false;
	 		$('#div_right').css({'position':'fixed', 'top':'-10px', 'margin-top':'0px'});
	 	}
		
		if ($(document).scrollTop() <= temp) {  //如果小于这个高度，则恢复原来状态
	 		flag = true;
	 		$('#div_right').css('position','');
	 	}
	 });
	
	
	*/
	

})(jQuery);
</script>