捧腹网的导航是如何做的呢？能随着页面的滚动而保持在最上面
日期：2014-05-17 浏览次数：20448 次
捧腹网的导航是怎么做的呢？能随着页面的滚动而保持在最上面，
捧腹网的导航是怎么做的呢？能随着页面的滚动而保持在最上面，淘宝的也是。有没有人知道呢？谢谢！
------解决方案--------------------
如果不考虑ie6，很简单，就几行css就行，要考虑ie6可以使用js
捧腹网的导航是怎么做的呢？能随着页面的滚动而保持在最上面，淘宝的也是。有没有人知道呢？谢谢！
------解决方案--------------------
如果不考虑ie6，很简单，就几行css就行，要考虑ie6可以使用js
- HTML code
<!doctype html>
<html>
<head><!doctype html>
<html>
<head>
<style>
html,body{margin:0;padding:0;}
#y1 {position:fixed;top:0;width:100%;height:100px;margin:auto;text-align:center;}
</style>
<!--[if lte IE 6]>
<style>
#y1 {position:absolute;}
</style>
<![endif]-->
</head>
<body style="padding-top:102px">
<div id="y1">
<div style="backgroind:orange;border:1px solid red;height:100px;width:1000px;margin:auto;">导航内容</div>
</div>
<script>
//以下所有脚本只为IE6写，其他浏览器完全可以删除。
function getViewportScrollX(){
var scrollX=0;
if(document.documentElement&&document.documentElement.scrollLeft){
scrollX=document.documentElement.scrollLeft;}
else if(document.body&&document.body.scrollLeft){
scrollX=document.body.scrollLeft;}
else if(window.pageXOffset){
scrollX=window.pageXOffset;}
else if(window.scrollX){
scrollX=window.scrollX;}
return scrollX;
}
function getViewportScrollY(){
var scrollY=0;
if(document.documentElement&&document.documentElement.scrollTop){
scrollY=document.documentElement.scrollTop;}
else if(document.body&&document.body.scrollTop){
scrollY=document.body.scrollTop;}
else if(window.pageYOffset){
scrollY=window.pageYOffset;}
else if(window.scrollY){
scrollY=window.scrollY;}
return scrollY;
}
function getViewportWidth() {
var width=0;
if(document.documentElement && document.documentElement.clientWidth){
width=document.documentElement.clientWidth;}
else if(document.body && document.body.clientWidth){
width=document.body.clientWidth;}
else if(window.innerWidth){
width=window.innerWidth-18;}
return width;
}
function getViewportHeight(){
var height=0;
if(window.innerHeight){
height=window.innerHeight-18;}
else if(document.documentElement&&document.documentElement.clientHeight){
height=document.documentElement.clientHeight;}
else if(document.body&&document.body.clientHeight){
height=document.body.clientHeight;}
return height;
}
if(navigator.userAgent.indexOf("MSIE 6") >-1 && navigator.userAgent.indexOf("MSIE 7") == -1 && navigator.userAgent.indexOf("MSIE 8") == -1){
window.ononload=window.onscroll=window.onresize=function(e){
var t = getViewportScrollY();
var l = getViewportScrollX();
var w = getViewportWidth();
var h = getViewportHeight();
document.getElementById("y1").style.left=l+"px";
document.getElementById("y1").style.top=t+"px";
}
}
</script>
<p>其他内容</p>
</body>
------解决方案--------------------
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.div1 ul li
{
display: inline-block;
line-height: 20px;
}
.div1 ul
{
background: #00FF00;
text-align: center;
width:1000px;
}
.ul2
{
position:fixed;
top:0;
width:1000px;}
.ul3
{
width:100%;
background:#F00;}
</style>
<script type="text/javascript" src="jquery-1.7.
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
