페이지 상단에 고정 된 부동 탐색 막대

나는 몇 가지 다른 시간을 본적이있는 무언가를 모방하려고합니다. 일반적으로 아래에 탐색 막대가있는 배너가 있으며 페이지가 스크롤되면 상단에 닿아 고정 된 상태로 유지 될 때까지 이동합니다. 나는 이것을 성취하는 방법을 완전히 모르고있다. 나는 단지 일하지 않는 몇 가지 다른 것들을 보았습니다.페이지 상단에 고정 된 부동 탐색 막대

주위를 둘러 보았을 때 나는 이런 식으로 작동 할 것이라고 생각했지만 제대로 작동하는 것처럼 보일 수 있습니다. 나는 몇 가지 물건에게 존재하지 않는 navTopPos 변수에

<!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>Untitled Document</title> 
<style type="text/css"> 
<!-- 
    #Table_01 { 
     position:relative; 
     left:0px; 
     top:0px; 
     width:1020px; 
     height:854px; 
     text-align: left; 
     margin-right: auto; 
     margin-left: auto; 
    } 
    body { 
     font-family: Verdana, Geneva, sans-serif; 
     font-size: 12px; 
     color: #a4c639; 
     text-align: center; 
     margin: 0px; 
    } 
--> 
</style> 
<script type='text/javascript'> 
    var topPos = 120; 
    var updatedPos; 
    window.onscroll = navPos; 
    if (!topPos) { 
     topPos = 120; 
    } 
    function navPos() { 
     var pos = window.scrollY; 
     if (!topPos) { 
      topPos = 120; 
     } 
     var st = document.getElementById('navTest'); 
     if (st) { 
      if (pos < topPos && updatedPos != 'absolute') { 
       st.style.position = 'absolute'; 
       st.style.top = topPos + 'px'; 
       updatedPos = 'absolute'; 
       //alert('Switched to absolute'); 
      } else if (pos >= topPos && updatedPos != 'fixed') { 
       st.style.position = 'fixed'; 
       st.style.top = '0'; 
       updatedPos = 'fixed'; 
       //alert('Switched to fixed'); 
      } 
     } 
    } 
    navPos(); 
</script> 
</head> 

<body> 
    <div id="Table_01"> 
     <div id='navTest' style='position:absolute;z-index:999;top:120px;left:0; height:50px;width:100%; background-color:#000;' width='100%'> 
     </div> 
    </div> 
</body> 
</html>

출처

2012-02-19 shinjuo

포스트 이것은 jsfiddle.net –

에 내가 있음을 사용한 적이 있지만, 내가하려고합니다 – shinjuo

쉬운 그냥 상자에 코드를 붙여 저장을 클릭하고 링크를 공유 –

모든 누락 된 참조하고있는 topPos 변수를 참조하도록 변경해야한다고 생각합니다. 귀하의 JS 코드는 지금해야한다 :

var topPos; 
var updatedPos; 
window.onscroll = navPos; 
if (!topPos) { 
    topPos = 120; 
} 
function navPos() { 
    var pos = window.scrollY; 
    if (!topPos) {//this line was changed 
     topPos = 120;//this line was changed 
    } 
    var st = document.getElementById('navTest'); 

    if (st) { 
     if (pos < topPos && updatedPos != 'absolute') { 
      st.style.position = 'absolute'; 
      st.style.top = topPos + 'px';//this line was changed 
      updatedPos = 'absolute'; 
      //alert('Switched to absolute'); 
     } else if (pos >= topPos && updatedPos != 'fixed') { 
      st.style.position = 'fixed'; 
      st.style.top = '0';  
      updatedPos = 'fixed'; 
      //alert('Switched to fixed'); 
     } 
    } 
} 
navPos();

인터프리터는 여기 어딘가에 사망 : 필요한 변경

if (!topNavPos) { 
    topNavPos = 120; 
}

Updated JSFiddle.

출처

2012-02-19 04:18:01

죄송합니다. 한 번에 한꺼번에 바꿔서 코드를 올바르게 편집하지 못했지만, wrong – shinjuo

@shinjuo 우리를 잘 해나 라. 이거 받아 줄래? 앞으로이 질문을하는 사람에게 도움이 될 것입니다. –

그래,하지만 난 주된 문제를 발견했다. 나는 topPos를 설정하지 않았다. 일단 120으로 설정하면 매우 효과적입니다. – shinjuo

페이지 상단에 고정 된 부동 탐색 막대

답변

관련 문제