jquery 置顶菜单

本文主要是介绍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>