position：fixed not for for navigation

问题描述：

我试图让我的导航固定，但我尝试向下滚动，但设置position:fixed;没有帮助。这里是我的导航：position：fixed not for for navigation

HTML：

<div id="nav"> 

     <ul> 
     <li><a href="second.html">Register</a></li> 
     <li> 
      <a href="second.html">Login</a> 
     </li> 
    </ul> 

    </div>

CSS：

#nav { 
    position:relative; 
    top: 0; 
    left: 0; 
    text-align: inline;  
    background-color: #FF9933; 
    height:90px; 
    width: 1400px; 
    background-image: url(G:/wallpapers/nav3.jpg);  
    font-family: "Comic Sans MS", Arial, Helvetica, sans-serif; 
    font-size: 130%; 
    } 

#nav ul { 
    list-style: none; 
    padding: 0; 
    height:800px; 
    width:300px;  
    margin: 0% 0% 0% 0%; 
}  

#nav ul li { 
    float: left; 
    font-weight: bold; 
    left:900px; 
} 

#nav ul li a { 
    display: block; 
    color: white; 
    left:900px; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
}

...我已经寻找了其他网站。 position:fixed正在为他们工作，但不适合我。这是他们正在使用的：

.navbar-fixed { 
    top: 0; 
    z-index: 100; 
    position: fixed; 
    width: 100%; 
} 

#body_div { 
    top: 0; 
    position: relative; 
    height: 200px; 
    background-color: green; 
} 

#banner { 
    width: 100%; 
    height: 273px; 
    background-color: gray; 
    overflow: hidden; 
} 

#nav_bar { 
    border: 0; 
    background-color: #202020; 
    border-radius: 0px; 
    margin-bottom: 0; 
    height: 30px; 
} 

//the below css are for the links, not needed for sticky nav 
.nav_links { 
    margin: 0; 
} 

.nav_links li { 
    display: inline-block; 
    margin-top: 4px; 
} 

.nav_links li a { 
    padding: 0 15.5px; 
    color: #3498db; 
    text-decoration: none; 
} 
</style> 
<script type="text/javascript"> 
$(document).ready(function() { 
    //change the integers below to match the height of your upper dive, which I called 
    //banner. Just add a 1 to the last number. console.log($(window).scrollTop()) 
    //to figure out what the scroll position is when exactly you want to fix the nav 
    //bar or div or whatever. I stuck in the console.log for you. Just remove when 
    //you know the position. 
    $(window).scroll(function() { 

    console.log($(window).scrollTop()); 

    if ($(window).scrollTop() > 550) { 
     $('#nav_bar').addClass('navbar-fixed-top'); 
    } 

    if ($(window).scrollTop() < 551) { 
     $('#nav_bar').removeClass('navbar-fixed-top'); 
    } 
    }); 
}); 
</script> 
<body> 
<div id="banner"> 
    <h2>put what you want here</h2> 
    <p>just adjust javascript size to match this window</p> 
</div> 

    <nav id='nav_bar'> 
    <ul class='nav_links'> 
     <li><a href="isha.html">Sign In</a></li> 
     <li><a href="isha.html">Blog</a></li> 
     <li><a href="isha.html">About</a></li> 
    </ul> 
    </nav>

我不能够了解如何将此应用于我的代码。我在相对导航中保持位置有问题吗？

*“我想以保持我的导航固定..“ - - 但是，然后你分配'位置：相对;'到你的'＃nav' ???你有没有检查你的规则的优先顺序？ – Abhitalks

如果您提供jsfiddle或任何其他在线编辑器，它确实会有所帮助。 –

在导航元素上设置'position：relative;'将会 - 上次我检查时 - 将它放置在相对......不固定的位置。 – Doidgey

答

我不知道问题是什么，你要告诉我们的，但这里有一个工作小提琴：https://jsfiddle.net/LLccjLr9/1/

#nav { 
    position:fixed; 
    top: 0; 
    left: 0; 
    text-align: inline;  
    background-color: #FF9933; 
    height:90px; 
    width: 1400px; 
    background-image: url(G:/wallpapers/nav3.jpg);  
    font-family: "Comic Sans MS", Arial, Helvetica, sans-serif; 
    font-size: 130%; 
}

注意，我还添加了一些margin-top到#banner<div>使它显示在导航下面。我也做了一个<body> 1000像素高，以证明它的作品...

我已编辑我的代码，请检查 – ishaarora95

答

你的法术错误的CSS类名navbar-fixed & jQuery的类名navbar-fixed-top

$(document).ready(function() { 
    $(window).scroll(function() { 

    console.log($(window).scrollTop()); 

    if ($(window).scrollTop() > 365) { 
     $('#nav_bar').addClass('navbar-fixed'); 
    } 

    if ($(window).scrollTop() < 366) { 
     $('#nav_bar').removeClass('navbar-fixed'); 
    } 
    }); 
});

https://jsfiddle.net/1x6qLLp1/

position：fixed not for for navigation

相关推荐