现在的位置: 首页 > 综合 > 正文

js 固定悬浮效果

2019年05月31日 ⁄ 综合 ⁄ 共 999字 ⁄ 字号 评论关闭
<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>

抱歉!评论已关闭.