今天做了个固定定位的效果。比如对导航需要进行固定定位效果：当没有滚动到导航下面，导航正常显示。当滚动到导航下面，导航就固定到顶部。
一、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/post/7775.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知