HTML下拉网页，导航条一直漂浮在顶端怎么做？ HTML下拉网页，导航条一直漂浮在顶端怎么做？
HTML\u4e0b\u62c9\u7f51\u9875\uff0c\u5bfc\u822a\u6761\u4e00\u76f4\u6f02\u6d6e\u5728\u9876\u7aef\u600e\u4e48\u505a\u554a\uff1f\u5c31\u662f\u4e0b\u62c9\u65f6\uff0c\u5bfc\u822a\u6761\u4e00\u76f4\u6f02\u6d6e\u5728\u9876\u7aef\u7b80\u5355\u7684\uff0c\u4e0d\u652f\u6301IE6\u3002\u53ef\u4ee5\u7528CSS\u76f4\u63a5\u5b9e\u73b0\u3002 .nav{ postion: fixed;}
\u5e94\u7528css\u6837\u5f0f
div.navigation {
position: fixed;
top: 0;
}
\u5173\u952e\u662f\u7528\u56fa\u5b9a\u4f4d\u7f6e\u5e03\u5c40
如果你有一定的基础，下面这段代码对你会有帮助的。
但是如果你没有基础，建议你好好先补下基础。
望采纳
style="position:fixed;top:0px;left:0px"
可以用JQ
$(window).on('scroll',function(){
$(window).scrollTop()>1200 ? $container_ul.addClass('pro_tab_tit'):$container_ul.removeClass('pro_tab_tit');
$(window).scrollTop()>1200 ? $container_ul.find('.fixbtn').show():$container_ul.find('.fixbtn').hide();
})
有很多插件可以实现 给你推荐个stickUp http://www.bootcss.com/p/stickup/
#head {
position:fixed;
top:0;
}
<!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>
<title>自动固定顶部的悬浮菜单栏代码</title>
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style:none;}
#content{width:600px;margin:0 auto;border:1px solid #f00;}
ul li.item{width:400px;text-align:center;margin:20px 100px;background:#00f;color:#fff;
font-size:14px;font-weight:bold;height:100px;line-height:100px;}
#float_banner{position:absolute;top:0;
left:50%;width:900px;margin-left:-450px;
height:30px;line-height:30px;
text-align:center;background:#000;
color:#fff;font-size:14px;
font-weight:bold;z-index:2;}
</style>
</head>
<body>
<div id="float_banner">这里是顶部的横幅，随着页面滚动而浮动</div>
绛旓細div.navigation { position: fixed;top: 0;} 鍏抽敭鏄敤鍥哄畾浣嶇疆甯冨眬
绛旓細style="position:fixed;top:0px;left:0px"
绛旓細<div class="fixed"></div>.fixed { width:100%; height:30px; background:#000; position:fixed; top:0; left:0;}涓昏鐢ㄥ埌浜唒osition:fixed 杩欎釜灞炴э紝甯屾湜鑳藉府鍒版偍锛岃阿璋紒
绛旓細姣斿锛 <div style="positoon:fixed;bottom:0px;width:100%;height:70px;background:#000;"> ...</div> 鑷充簬浣犺鐨勬粦鍒颁竴鑸椂鎵嶅嚭鐜帮紝 闇瑕佺敤javascript浠ｇ爜锛屾崟鑾锋粴鍔ㄤ簨浠讹紝鍒ゆ柇璺濈锛屽氨鍙互浜嗭紝鍙互杩介棶鍝
绛旓細鍙互鐢↗Q $(window).on('scroll',function(){ $(window).scrollTop()>1200 ? $container_ul.addClass('pro_tab_tit'):$container_ul.removeClass('pro_tab_tit'); $(window).scrollTop()>1200 ? $container_ul.find('.fixbtn').show():$container_ul.find('.fixbtn').hide...
绛旓細js鎺у埗div鍦ㄥ彸涓嬭鏄剧ず锛宒iv宓屽涓涓猧frame鏄剧ず璇缃戦〉鍗冲彲
绛旓細鎵嬫満椤甸潰鐨勮瘽html鐨澶撮儴鏈濂藉厛鍔犱笂<meta name="viewport" content="width=device-width, initial-scale=1.0 minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>杩欑鏍囩锛岃〃绀烘槸鏍规嵁鎵嬫満灞忓箷1:1鏄剧ず鐨勯〉闈傝繖绉嶆儏鍐甸渶瑕佺敤鐧惧垎姣旀潵缂栧啓鏍峰紡鐨勫搴﹀ぇ灏忔垨鑰呯敤JS鍒ゆ柇鏍规嵁涓嶅悓鐨勫睆骞曞垎杈ㄧ巼鏉...
绛旓細瀵逛簬娌℃湁璁惧畾涓轰腑鏂囦唬鐮佺殑涓枃缃戦〉,Netscape Netvigator 涓嶄細鏄剧ず姝ゆ爣璁 鎵鎸囨槑鐨勪换浣曚腑鏂囧瓧浣撱 size="+2" 璁惧畾鏂囧瓧鐨勫ぇ灏忋傚叾鍊煎彲浠ユ槸缁濆鎴栫浉瀵, 缁濆鐨勬剰鎬濇槸鏍囪鑷繁鍐冲畾鏂囧瓧鐨勫ぇ灏,涓嶅彈 <BASEFONT> 鐨勫奖鍝,濡 size="5" 琛ㄧず鍏跺ぇ灏忎究鏄 5, 鑰html鍐呭畾鍊间负 3,鍗 size="3"鍜屾病璁惧畾鏄竴鏍风殑銆 鐩稿鐨...
绛旓細寤轰竴涓html椤甸潰鎶婁笅闈㈢殑浠ｇ爜鎷疯繘鍘诲氨鍙互浜嗭紒<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>婕傛诞绐楀彛</title> </head> <body> <DIV id=img1 style="Z-INDEX: 10; LEFT: 2px; WIDTH: 59px; POSITION: absolute; TOP: 43px; HEIGHT:...
绛旓細1銆佷袱涓煎墠闈竴涓槸妯悜鐨勫畾浣嶏紝绉颁负x杞存柟鍚戝畾浣嶃傚悗闈竴涓兼槸绾靛悜鐨勫畾浣嶏紝绉颁负y杞存柟鍚戝畾浣嶃傚鏋滃彧鏈変竴涓硷紝閭ｉ粯璁ょ殑灏辨槸x杞存柟鍚戯紝杩欐椂y杞存柟鍚戝氨榛樿鐨勬槸涓婁笅灞呬腑瀵归綈锛屼篃灏辨槸center銆2銆佸潗鏍囪酱鐨勫師鐐瑰氨鏄搴斿鍣ㄧ殑宸﹂《鐐广3銆佽繖涓潗鏍囩殑y杞寸澶存湞涓嬶紝涔熷氨鏄彸涓嬫柟锛堝鍣ㄥ唴閮級x y鐨勫兼墠...
