顶部导航栏在滚动的时候，不能自适应屏幕居中，求解决办法？_html/css_WEB-ITnose
- WBOY原創
- 2016-06-24 11:27:181647瀏覽
这个就是顶部导航，在我的电脑上显示正常，但是换别的分辨率电脑，就显示有问题了，
我这里边用了一段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的定位就错了
确实是这个原因，我换了种办法，好了，谢谢了。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn