css javascript jquery js 导航 升到 滚到 顶部 固定 js 网页代码 div随滚动条 移动到浏览器顶部 固定的问题
\u6c42\u52a9:\u5982\u679c\u4f7f\u7528js\jq \u63a7\u5236\u4e00\u4e2adiv \u5f53\u6eda\u52a8\u5230\u9875\u9762\u9876\u90e8\u7684\u65f6\u5019\u56fa\u5b9a\u5728\u9876\u90e8\uff0c\u79bb\u5f00\u53ef\u7ee7\u7eed\u6eda\u52a81\u3001\u65b0\u5efahtml\u6587\u6863\u3002
2\u3001\u4e66\u5199hmtl\u4ee3\u7801 \u6211\u662f\u56fa\u5b9a\u7684\u54df\u3002
3\u3001\u4e66\u5199css\u4ee3\u7801\u3002**{padding:0px;margin:0px;}.box{width:1000px;
;background:#ccc;margin:0 auto;overflow:hidden;}.main{width:770px;height:3000px;\u3002
;background:#000;float:left;}.sub{width:220px;background:#FC6;float:right;}.\u3002
4\u3001sub01{width:220px;height:100px;background:#0CC;margin-bottom:10px;}.fixed
{width:220px;height:300px;background:#F66;font:normal 13px/30px \5FAE\8F6F\96C5\
9ED1;text-align:center;top:10px;}\u3002
5\u3001\u4e66\u5199\u5e76\u6dfb\u52a0js\u4ee3\u7801\u3002\u3002\u8fd9\u5c31\u5b8c\u6210\u4e86\u3002
//html \u7a7adiv \u79fb\u52a8\u5230\u9876\u90e8\u56fa\u5b9a\u4e0d\u53d8 \u7a7adiv \u7a7adiv \u79fb\u52a8\u5230\u5e95\u90e8\u56fa\u5b9a\u4e0d\u53d8 //js$(function(){ //\u83b7\u53d6\u8981\u5b9a\u4f4d\u5143\u7d20\u8ddd\u79bb\u6d4f\u89c8\u5668\u9876\u90e8\u7684\u8ddd\u79bb var navH = $(".nb").offset().top; var navH2 = $(".nb2").offset().top; var Pur= $(".purple").offset().top; //\u7d2b\u8272\u5757 var Red= $(".red").offset().top; //\u7ea2\u8272\u5757 //\u6eda\u52a8\u6761\u4e8b\u4ef6 $(window).scroll(function(){ //\u83b7\u53d6\u6eda\u52a8\u6761\u7684\u6ed1\u52a8\u8ddd\u79bb var scroH = $(this).scrollTop(); //\u6eda\u52a8\u6761\u7684\u6ed1\u52a8\u8ddd\u79bb\u5927\u4e8e\u7b49\u4e8e\u5b9a\u4f4d\u5143\u7d20\u8ddd\u79bb\u6d4f\u89c8\u5668\u9876\u90e8\u7684\u8ddd\u79bb\uff0c\u5c31\u56fa\u5b9a\uff0c\u53cd\u4e4b\u5c31\u4e0d\u56fa\u5b9a if(scroH>=navH){ $(".nb").css({"position":"fixed","top":0}); }else if(scroH= Pur && scroH <= Red){ $(".nb").css({"position":"static"}); //\u5728\u7d2b\u8272\u5757\u7684\u65f6\u5019\u4e0d\u56fa\u5b9a $(".nb2").css({"position":"static"}); //\u5728\u7d2b\u8272\u5757\u7684\u65f6\u5019\u4e0d\u56fa\u5b9a } }) })
<html>
<meta charset="utf-8" />
<div style="width:1200px;height:100px;background:#CC6837;margin:0 auto;" id="logo">LOGO</div>
<div style="width:1200px;height:38px;background:#32C191;margin:0 auto;">
<div style="width:1200px;height:38px;float:left;background:#32C191;" id="nav">nav导航栏</div>
</div>
<div style="width:1200px;height:3000px;background:#9EAAA6;margin:0 auto;">内容</div>
</html>
<!-- 引用jquery -->
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
var a = $("#nav").offset().top;//获取div距离浏览器顶部高度
//绑定浏览器滚动事件
$(window).scroll(function() {
var obj_height = document.documentElement.scrollTop || document.body.scrollTop;
//当往下拉的高度超出div的高度时浮动跟随显示在浏览器最顶部
if(obj_height >= a)
{
var this_width = $("#nav").width();
var obj_width = $(window).width();//保证居中用的
$("#nav").css({"position":"fixed","left":(obj_width-this_width)/2,"top":"0px"});
}
else
{
$("#nav").css({"position":"relative","left":"0","top":"0px"});//当浏览器高度小于div原高度时去除浮动跟随,定位回到原位置
}
});
</script>
直接复制到html用浏览器打开就能看到效果
扩展阅读：javascript webrtc ... javascript innerhtml ... free xbox live code ... javascript void 0 ... macbookair色域709 ... javascript substring ... javascript appendchild ... javascript confirm ... javascript onclick ...
