Home > Article > Web Front-end > 顶部导航栏在滚动的时候，不能自适应屏幕居中，求解决办法？_html/css_WEB-ITnose
顶部导航栏在滚动的时候，不能自适应屏幕居中，求解决办法？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:27:181623browse
这个就是顶部导航，在我的电脑上显示正常，但是换别的分辨率电脑，就显示有问题了，
我这里边用了一段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的定位就错了
确实是这个原因，我换了种办法，好了，谢谢了。
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：12个网页实用的CSS框架_html/css_WEB-ITnoseNext article：这个站的HTML如何下载_html/css_WEB-ITnose