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

即使读者向下滚动，我也试图让我的导航/菜单栏"粘"在页面顶部。我已经尝试了两种位置：固定;和位置：绝对;，但它一直不起作用，我不知道为什么。我将包含以下代码：

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

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

此外，为清楚起见，建议使用<nav>标签 - http://html5doctor.com/nav-element/

你可以在你的元素上使用position:sticky;，但我强烈建议不要使用它，因为它只受 safari 支持。

你需要Javascript来做到这一点，本质上你监听滚动事件，当你到达某个滚动位置时，你把你的位置切换到position:fixed

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

你应该

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

#navigation {
    position: fixed;
    z-index: 10;
}
#header {
    margin-top: 50px;
}

或

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

这个是用于野生动物园位实验性的。

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

相关内容

最新更新

热门标签：