Fatal编程技术网
  • javascript/
  • Javascript 固定在页面顶部的浮动导航栏

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

javascript

Javascript 固定在页面顶部的浮动导航栏,javascript,floating,nav,Javascript,Floating,Nav,我试着模仿一些我已经见过几次的东西。通常在下方有一个带有导航条的横幅，当页面滚动时，横幅会一直移动，直到触及顶部，然后停止并保持固定。我不完全确定如何做到这一点。我已经看到了一些不同的事情，只是不工作 环顾四周后，我发现它会像这样工作，但我似乎可以让它工作。我想我错过了一些东西 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran

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

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

<!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>


无标题文件
var-topPos=120；
var更新pos；
window.onscroll=navPos；
如果（！topPos）{
topPos=120；
}
函数navPos（）{
var pos=window.scrollY；
如果（！topPos）{
topPos=120；
}
var st=document.getElementById（'navTest'）；
if（st）{
如果（pos=topPos&&updatedPos！=“已修复”）{
st.style.position='固定'；
st.style.top='0'；
updatedPos='固定'；
//警报（“切换到固定”）；
}
}
}
navPos（）；
所有对不存在的
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();
​
进行必要的更改。

我从未使用过，但我会尝试将您的代码粘贴到框中。单击“保存并共享”链接此处是链接，我将其张贴在上方，方法如下：？？很抱歉，在多次更改代码后，我没有正确地重新编辑代码，但我发现了错误所在wrong@shinjuo我们中最好的。你能接受这个吗？是的，但是我发现主要的问题是我没有设定任何目标。一旦设置为120，它就会工作great@shinjuo对现在的代码就是这样做的。是的，它看起来不错：）移动到底部后，如果我滚动到顶部，它不会返回！ 
if (!topNavPos) {
    topNavPos = 120;
}