jQuery实现页面滚动时层智能浮动定位

最新推荐文章于 2022-11-10 16:24:57 发布

阿聪世家

最新推荐文章于 2022-11-10 16:24:57 发布

阅读量2k

点赞数

分类专栏：网站常用jquery效果常用代码文章标签： jquery 定位

本文链接：https://blog.csdn.net/congcong875/article/details/8737449

版权

网站常用jquery效果同时被 2 个专栏收录

52 篇文章 0 订阅

订阅专栏

常用代码

12 篇文章 0 订阅

订阅专栏

各位兄弟可能碰到定位的问题，特别是在博客或者微博上面也会见到这个效果，于是产品人员在策划的时候就会要人家那种效果，，，而苦逼的我们需要去实现，实现实现。。。。。没办法，谁让我们是攻城师呢，，攻吧：

效果图如下，滚动条下拉的时候，黑色的块TOP为0；固定显示：

代码如下：

<!DOCTYPE html>
<html >
<head>
<title>jQuery实现页面滚动时层智能浮动定位</title>

<meta name="description" content="" />
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
<style type="text/css"> 
*{ margin:0; padding:0;}
.top{height:100px; background:#ccc;text-align:center; line-height:100px; font-size:40px;}
body { font:12px/1.8 Arial; color:#666; height:2000px;}
.float{width:200px; height:200px; border:1px solid #ffecb0; background-color:#000;position:absolute; right:10px; top:150px;}
</style> 
</head>
<body>
<div class="top">导航啊导航啊导航</div>
<div class="float" id="float"></div>

<script type="text/javascript">
$.fn.smartFloat = function() {
	var position = function(element) {
		var top = element.position().top, pos = element.css("position");
		$(window).scroll(function() {
			var scrolls = $(this).scrollTop();
			if (scrolls > top) {
				if (window.XMLHttpRequest) {
					element.css({
						position: "fixed",
						top: 0
					});	
				} else {
					element.css({
						top: scrolls
					});	
				}
			}else {
				element.css({
					position: pos,
					top: top
				});	
			}
		});
};
	return $(this).each(function() {
		position($(this));						 
	});
};
//绑定
$("#float").smartFloat();
</script>    
</div>
</body> 
</html>

最近新增一个简单的效果，当底部有东西的时候右侧不会跑到底部上面去：

JS：

/右侧浮动JS
	  var ftop=$(".fr_footerbg").offset().top;
	  var wtop=$(".fr_main_r").offset().top;  
	  $(window).scroll(function(){
      var scroll_top = $(this).scrollTop();
			if(scroll_top>=wtop)
			{
			$(".fr_main_r").css({"position":"fixed","top":0});
			}
			else 
			{
			$(".fr_main_r").css({"position":"static"});
			}
			
			if(scroll_top>ftop-$(".fr_main_r").height())
			{
			$(".fr_main_r").css({"position":"relative","top":ftop-

$(".fr_main_r").height()-120});
			}

    });

阿聪世家

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现页面滚动时层智能浮动定位

各位兄弟可能碰到定位的问题，特别是在博客或者微博上面也会见到这个效果，于是产品人员在策划的时候就会要人家那种效果，，，而苦逼的我们需要去实现，实现实现。。。。。没办法，谁让我们是攻城师呢，，攻吧：效果图如下，滚动条下拉的时候，黑色的块TOP为0；固定显示：代码如下：jQuery实现页面滚动时层智能浮动定位 *{ margin:0; padding:0;}
复制链接

扫一扫

专栏目录