Home >Web Front-end >HTML Tutorial >顶部导航栏在滚动的时候,不能自适应屏幕居中,求解决办法?_html/css_WEB-ITnose
这个就是顶部导航,在我的电脑上显示正常,但是换别的分辨率电脑,就显示有问题了,
我这里边用了一段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"); } });});
页面网址 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>
<!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>