顶部导航栏在滚动的时候，不能自适应屏幕居中，求解决办法？_html/css

顶部导航栏在滚动的时候，不能自适应屏幕居中，求解决办法？_html/css_WEB-ITnose

WBOY

发布： 2016-06-24 11:27:18

原创

1645 人浏览过

这个就是顶部导航，在我的电脑上显示正常，但是换别的分辨率电脑，就显示有问题了，
我这里边用了一段js代码，贴出来

$(document).ready(function(){  var topMain=$("#header").height();//是头部的高度加头部与nav导航之间的距离  var nav=$(".daohang");  $(window).scroll(function(){    if ($(window).scrollTop()>topMain){//如果滚动条顶部的距离大于topMain则就nav导航就添加类.nav_scroll，否则就移除      nav.addClass("daohang_scroll");    }else{      nav.removeClass("daohang_scroll");    }  });});

登录后复制

daohang_scroll这块的css .daohang_scroll{position:fixed;width:100%;right:0;top:0;margin:0 auto;padding-right: 170px;}

求大神解答！！

回复讨论(解决方案)

页面网址 http://www.25mj.com/huodong/160227/index.php 求解决！！

<!DOCTYPE html><html><head>	<title></title>	<style type="text/css">	#nav{		position:relative;		width: 100%;		height: 50px;		border: 1px solid #cccccc;	}	#content{		position: absolute;		left: 0px;		right: 0px;		margin: 0px auto;		width: 400px;		height:40px;		border: 1px solid black;	}	</style></head><body>	<div id="nav">		<div id="content"></div>	</div></body></html>

登录后复制

这样子布局可以解决吗？

<!DOCTYPE html><html><head>	<title></title>	<style type="text/css">	*{		padding: 0px;		margin: 0px;	}	#nav{		position:fixed;		width: 100%;		height: 45px;		background-color:red;	}	#content{		position: absolute;		left: 0px;		right: 0px;		margin: 0px auto;		width: 810px;		height:45px;	}	ul{		list-style-type:none;		height: 100%;	}	li{		float: left;		width: 100px;		height: 100%;		margin-right:1px; 		background-color:yellow;	}	</style></head><body>	<div id="nav">		<div id="content">			<ul>				<li></li>				<li></li>				<li></li>				<li></li>				<li></li>				<li></li>				<li></li>				<li></li>			</ul>		</div>	</div></body></html>

登录后复制

你使用了map，图片大小必须确定，一旦自适应的话，coords的定位就错了

<!DOCTYPE html><html><head>	<title></title>	<style type="text/css">	*{		padding: 0px;		margin: 0px;	}	#nav{		position:fixed;		width: 100%;		height: 45px;		background-color:red;	}	#content{		position: absolute;		left: 0px;		right: 0px;		margin: 0px auto;		width: 810px;		height:45px;	}	ul{		list-style-type:none;		height: 100%;	}	li{		float: left;		width: 100px;		height: 100%;		margin-right:1px; 		background-color:yellow;	}	</style></head><body>	<div id="nav">		<div id="content">			<ul>				<li></li>				<li></li>				<li></li>				<li></li>				<li></li>				<li></li>				<li></li>				<li></li>			</ul>		</div>	</div></body></html>

登录后复制

你使用了map，图片大小必须确定，一旦自适应的话，coords的定位就错了

确实是这个原因，我换了种办法，好了，谢谢了。