fixed固定导航，并左右滑动

最新推荐文章于 2024-09-30 11:36:42 发布

Muscle_Mliu

最新推荐文章于 2024-09-30 11:36:42 发布

阅读量3.6k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： JS中实用的小方法

本文链接：https://blog.youkuaiyun.com/liuzijiang1123/article/details/52740879

JS中实用的小方法专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种解决固定导航在窗口缩小时左右滚动导致导航显示不全的问题。通过JavaScript动态调整导航的left值，使得导航能随着页面左右滚动而移动，提升用户体验。代码示例中展示了如何使用jQuery实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大家看平时看网页的时候可以看见很多导航是不受上下滑动条影响的(使用了fixed布局)，例如：

但是如果用户把页面缩小成窗口后，拖动左右滚轮的话就有可能看不到右边的导航部分，这一点我觉得有点影响用户体验了。

目前应该是两种解决方案：

1.利用@media来判断页面的宽度，使得头部导航自动变换样式，缩小成一个下拉框按钮；

2.利用JS动态改变导航的left值；

我这里就用第二种方法：

思路很简单，就是设置这个导航的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;width:1200px;">
<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>