js 固定悬浮效果

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

open520yin

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

阅读量2.7k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/openn/article/details/8778960

版权

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

摘要由CSDN通过智能技术生成

<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