停止固定在页面顶部的浮动导航栏

我试图模仿我见过几次不同时间的东西。通常在下面有一个带有导航栏的横幅，当页面滚动时，它会移动，直到它接触到顶部，然后停止并保持固定。我不完全确定如何做到这一点。我看到了几个不同的东西，只是不工作。停止固定在页面顶部的浮动导航栏

环顾四周后，我发现它会像这样工作，但我似乎得到它的工作。我想我错过了一些东西

<!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 – 2012-02-19 04:05:45

我从来没有用过，但我会尽量 – shinjuo 2012-02-19 04:06:52

它很容易只是你的代码粘贴到框中单击保存和分享的链接 – 2012-02-19 04:07:48

到一个不存在的navTopPos变量的所有引用应改为引用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

对不起，我没有正确地编辑我的代码后改变了一堆，但我想清楚是什么错误 – shinjuo 2012-02-19 04:22:27

@shinjuo发挥我们最好的。你能接受吗？它将帮助任何未来遇到这个问题的人。 – 2012-02-19 04:24:18

是的，但我发现主要问题是我没有设置topPos任何东西。一旦设置为120，它的效果很好 – shinjuo 2012-02-19 04:27:09

停止固定在页面顶部的浮动导航栏

回答

相关问题