Question

我正在尝试创建一个网站，其顶部是一个导航栏，即使在向下滚动时也始终在页面上。有谁知道如何做到这一点？这是我目前的代码

HTML

        <div id="navbar_wrapper">
            <h1 class="heading">heading</h1>
            <nav>
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                    <li><a href="#">Link 5</a></li>
                </ul>
            </nav>
        </div>

CSS

#navbar_wrapper
{
background-image: url("../images/70%25_grey.png");
padding: 20px 20px;
color:white; 
text-transform: uppercase; 
}

.heading
{
font-size:30pt;    
}

 nav ul li
 {
 margin-top:50px;    
 display:inline-block;    
 padding-right:18px;  
 }

基本上，我希望整个div跟随页面，并显示在Web浏览器窗口的顶部，无论您在页面上的哪个位置。我感谢任何帮助。

由于

Answer 1

你可以使用position：fixed for main Div。所以它将始终固定

#navbar_wrapper
{
background-image: url("../images/70%25_grey.png");
padding: 20px 20px;
color:white; 
text-transform: uppercase; 
position:fixed;
top:0
left:0; 
width:100%;
}

Answer 2

您可以在CSS中执行类似的操作

ul {
    position: fixed;
    top: 0;
    width: 100%;
}

Info About navigation bars created in css

Answer 3

只需在 navbar_wrapper position:fixed;中使用此css属性，这样就可以了。您可以访问以下链接，查看 css 的固定属性的示例。

访问：http://crackit9.blogspot.in/p/blog-page.html

如何让导航栏跟随页面？

3 个答案: