fixed固定导航，并左右滑动

来源：互联网发布：日本常任理事国知乎编辑：程序博客网时间：2024/05/18 18:22

大家看平时看网页的时候可以看见很多导航是不受上下滑动条影响的，例如：

但是它们也不受左右滑动条的影响，这一点我觉得有点影响用户体验了。

这里就用一个简单的JS方法让头部导航受左右滑轮的影响。

思路很简单，就是设置这个导航的left值，例如，当左右的滑轮往右滑了100px的时候，把导航的left赋值为-100px，即可。

效果图：

原始

若不加js处理，导航是不随下面滑轮滑动而动的

加了js处理的效果，导航也随下面的左右滑轮动而动了

下面是代码。

<html><head><meta http-equiv="Content-Type" content="text/html"/><title>nzj</title><style>.top{position:fixed;height:90px;width:1440px;background-color:red;top:0px;}.nav ul{width:980px;margin:0px auto 0px auto;list-style:none;}.nav ul li{float:left;}.nav ul li a{width:80px;height:28px;line-height:28px;background:red;color:#FFF;margin:5px 10px;font-size:12px;display:block;text-align:center;text-decoration:none;}.main{margin-top:100px;margin-left:300px;background-color:green;height:600px;width:600px;}</style></head><body style="margin:0px;padding:0px"><div class="top"><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">导航1</a></li><li><a href="#">导航2</a></li><li><a href="#">导航3</a></li><li><a href="#">导航4</a></li><li><a href="#">导航5</a></li><li><a href="#">导航6</a></li></ul></div></div><div class="main">lzj lzj</div><script src="jquery.js" language="JavaScript"></script><script language='javascript' type='text/javascript'>window.onscroll=win_scroll;function win_scroll(){var top_left= document.body.scrollLeft;$(".top").css("left",-top_left+"px");console.log(top_left);}</script> </body></html>

0 0