jquery导航菜单栏固定悬浮顶部实现效果

时间：6年前阅读：5117

今天做了个固定定位的效果。比如对导航需要进行固定定位效果：当没有滚动到导航下面，导航正常显示。当滚动到导航下面，导航就固定到顶部。

一、css部分：

fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

二、这个效果使用了jquery的方法实现，具体思路为：

1、首先获得已经滚动上去的高度

2、让导航条固定定位如果t>139加f这个Class,让它有定位

3、如果小于或等于139,取消f这个Class

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			*{    
				padding: 0;    
				margin: 0;    
			}    
			img{    
				display: block;    
				margin: 0 auto;    
			}    
			img#menu.f{    
				position: fixed;    
				left: 50%;    
				margin-left: -602px;    
				top: 0;    
			}    
		</style>    
		<script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>    
		<script type="text/javascript">    
			$(function(){    
//				给浏览器加滚动条事件    
				$(window).scroll(function(){    
//					获得已经滚动上去的高度   document页面文档区域      window也可以    
					var t = $(document).scrollTop();    
					document.title = t;    
					if (t>139) {    
//						让导航条固定定位       fixed:固定的     向左留50%（一半的距离有居右的效果），然后这个图片是1204px宽度，图片在右，向左是负的（）图片一半602px，达到居中效果    
//					$('#menu').css({'position':'fixed','top':'0','left':'50%','margin-left':'-602px'})	
    
//					让导航条固定定位    如果t>139加f这个Class,让它有定位    
					$('#menu').addClass('f');	
    
					}else{    
//						如果小于或等于139,取消f这个Class    
					$('#menu').removeClass('f');    
					}    
				})    
			})    
		</script>    
	</head>    
	<body>    
		<img src="https://www.qiquanji.com/data/img/dmj/201903211553156320441253.jpg" alt="" id="menu" />
		<img src="https://www.qiquanji.com/data/img/dmj/201903211553156373840105.jpg" alt="" />  
		<img src="https://www.qiquanji.com/data/img/dmj/201903211553156398239665.jpg" alt="" />    
	</body>    
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

jquery导航菜单栏固定悬浮顶部实现效果

网友评论