Question

我正在尝试将我的导航/菜单栏设置为＆＃34; stick＆＃34;即使阅读器向下滚动，也会到页面顶部。我尝试了两个位置：固定;和位置：绝对;但它没有工作，我不知道为什么。我将包含以下代码：

CSS

 /* Navigation */

    div.menu {
        width:100%;
        height:40px;
        display:block;
        position:fixed;
        top:0;
        right:0;
    }
    div.menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        font-size: .8em;
        position: absolute;
        right: 0;
        top: 0;
        width: 40%;
    }
    div.menu li {
        display: inline-block;
    }
    div.menu li a{
        display: inline-block;
        text-align: center;
        padding: 1.5em;
    }
    div.menu li a:hover {
        background-color: #6b9d68;
        color: white;
    }
    div.menu li a.active {
        background-color: #000000;
        color: white;
    }

HTML

<!DOCTYPE html>
<html lang="en-US">
<head>
    <div class="menu">
        <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="cv.php">CV</a></li>
        <li><a href="research.php">Research</a></li>
        <li><a href="teaching.php">Teaching</a></li>
        <li><a href="http://academia-25-to-life.blogspot.com">Blog</a></li>
        </ul>
    </div>

    <div class="logo">
        <img src="logo.jpg">
    </div>

    <div class="divider">
        <img src="divider.jpg">
    </div>
</head>
</html>

Answer 1

您是在内联还是在两个单独的文件中声明它？如果后者你缺少样式表参考。

另外，为了清晰起见，建议使用<nav>标记 - http://html5doctor.com/nav-element/

Answer 2

你可以在你的元素上使用position:sticky;，但我强烈反对它，因为它只有safari支持。

你需要使用Javascript来实现这一点，基本上你是在听滚动事件，当你到达某个滚动位置时，你将你的位置切换到position:fixed

如果您需要帮助，我建议您查看本教程http://blog.teamtreehouse.com/create-sticky-navigation

Answer 3

你应该使用的轻松方法JS（JQuery）也可以试试CSS：

#navigation {
    position: fixed;
    z-index: 10;
}

#header {
    margin-top: 50px;
}

或

.nav 
{
    position: -webkit-sticky;
    top: 0;
    z-index: 1;
}

这个用于野生动物实验。

Answer 4

您必须将代码放在<body> - 标记之间，并在您的html文件中包含css代码。

使用CSS制作静态/粘性菜单栏

4 个答案: