jquery 置顶菜单
需求
初始状态如上图，当拖动右侧的滚动条，菜单置顶的时候需要固定位置，如下：
注意：当Banner图片完全上移出了浏览器可视区域，此时菜单固定定位在文档的最上方。
首先编写基本HTML以及CSS
编写jquery实现menu置顶效果
设置当$(document).scrollTop() > 100的时候，也即是banner离开可视区域的时候，修改menu的样式为固定定位，并且设置top和left的距离。
此时有一个问题，就是滚动条往上拖的时候，无法恢复看到banner，一直被menu覆盖着。
对于这个问题，只需要设置当$(document).scrollTop() <= 100 或者 if 判断中的 else分支，恢复position为定位的默认值即可。
那么问题来了！！position的默认值是什么呢？答案就是static。
更加关于position的详细内容可以查看CSS 定位布局 - 相对、绝对、固定三种定位。
编写menu当滚动条往上拖动的时候，恢复原来的定位，可以展示出banner
当设置postion:static的时候，定位的方式就会恢复文档流中的布局。其中top和left就会失效。
问题2：menu设置固定定位的时候，因为脱离了文档流布局，p段落直接飘到上方。
另一个问题，当menu置顶的时候，p段落的内容直接就被遮挡了，如下：
设置透明度为0.5之后，就可以看到第一个p段落在menu的下方。
这种肯定不合理，那么怎么去解决呢？
设置一个menu的背景div，当menu固定定位的时候，设置这个背景div撑住文档流的位置，这样就可以规避这个问题了。
增加一个背景div
设置当menu固定的时候，同时设置menu_bak显示出来
可以看到，由于menu_bak撑住，所以p段落没有一下子上移上去了。
基本上执行菜单的问题就差不多是这样了。
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
var $menu = $('.menu');
var $menu_bak = $('.menu_bak');
$(window).scroll(function(){
console.log("document.scrollTop = " + $(document).scrollTop());
if( $(document).scrollTop() > 100 ){
// alert("scrollTop > 100");
$menu.css({
"position":'fixed',
"top":0,
"left":0
});
$menu_bak.show();
}
else{
$menu.css({
"position":'static',
});
$menu_bak.hide();
}
});
});
</script>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
p{
color: red;
text-align: center;
}
.banner{
width: 100%;
height: 100px;
background-color: rgb(184,233,189);
line-height: 100px;
text-align: center;
}
.menu{
width: 100%;
height: 100px;
background-color: rgb(236,237,176);
line-height: 100px;
text-align: center;
opacity: 0.5;
}
.menu_bak{
width: 100%;
height: 100px;
display: none;
}
</style>
</head>
<body>
<div class="banner">Banner</div>
<div class="menu">menu</div>
<div class="menu_bak"></div>
<!-- (p{这是文档内容}+br*10)*10 -->
<p>这是文档内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>这是文档内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>这是文档内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>这是文档内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>这是文档内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>这是文档内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>这是文档内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>这是文档内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>这是文档内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>这是文档内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.04.19 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录