javascript 에서 position 값 을 변경 하여 메뉴 를 맨 위로 스크롤 한 후 고정 합 니 다.
html 코드:
<br/><link rel="stylesheet" type="text/css" href="css/base.css" media="all"/>
<br/><style type="text/css">
<br>.wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;}
<br>.header{height:150px;}
<br>#nav{padding:10px;position:relative;top:0;background:black;width:1000px;}
<br>a{display:inline-block;margin:0 10px;*display:inline;zoom:1;color:white;}
<br></style>
<br/>
<br/>
<br/><div class="wrapper">
<br/><div class="header"/>
<br/><div id="nav">
<br/><a href="#">11111</a>
<br/><a href="#">22222</a>
<br/><a href="#">33333</a>
<br/><a href="#">44444</a>
<br/><a href="#">55555</a>
<br/></div>
<br/></div>
<br/>
<br/>
<br/><script type="text/javascript" src="menuFixed.js"/>
<br/><script type="text/javascript">
<br>window.onload = function(){
<br>menuFixed('nav');
<br>}
<br></script>
<br/>
</code></pre>
<br/>
<strong>menuFixed.js </strong>：
<br/>
<pre><code>
<br/>function menuFixed(id){
<br/>var obj = document.getElementById(id);
<br/>var _getHeight = obj.offsetTop;
<br/>window.onscroll = function(){
<br/>changePos(id,_getHeight);
<br/>}
<br/>}
<br/>function changePos(id,height){
<br/>var obj = document.getElementById(id);
<br/>var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
<br/>if(scrollTop < height){
<br/>obj.style.position = 'relative';
<br/>}else{
<br/>obj.style.position = 'fixed';
<br/>}
<br/>}
<br/>
</code></pre>
<br/> ， ie6 ， ie6 position:fixed;
<br/>PS： ， javascript ， 。
<div class="clearfix">
<span id="art_bot" class="jbTestPos"/>
</div>
</div>
</div>
</div> 이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
