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

我试图让我的导航/菜单栏“粘”到页面的顶部，即使读者向下滚动。我试过两个位置：固定;和位置：绝对，但它没有工作，我不知道为什么。我会包括下面的代码：使用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>

来源

2016-03-09 Jen Justice

首先，您的代码位于'' - 它应该位于''。我复制了你的代码，它为我工作。你确定，你的HTML包含在你的HTML？在上面的例子中，你没有。 – molerat

....不知何故，我知道它会是这样愚蠢的。你是对的。我没有把它放在身体里。所有固定。谢谢！ –

没问题 - 我会添加一个答案，请标记为正确答案;） – molerat

你可以在你的元素上使用position:sticky;但我强烈反对这样做，因为它只能通过支持苹果浏览器。

需要Javascript做到这一点，基本上是你听滚动事件，当你已经达到了一定的滚动位置，您打开位置position:fixed

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

来源

2016-03-09 00:27:13 Xposedbones

也许这个链接更完整:) http://www.sitepoint.com/css-position-sticky-introduction-polyfills/ –

的伊西方法，你应该使用JS（JQuery的）也可以尝试CSS：

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

#header { 
    margin-top: 50px; 
}

或者

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

这是一个safari位试验。

来源

2016-03-09 00:31:12

原作海报（op）不再有问题。 –

你是以内联还是两个单独的文件声明它？如果后者缺少样式表引用。

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

来源

2016-03-09 00:39:30

你必须把<body> - 标签之间的代码，包括HTML文件中的CSS代码。

来源

2016-03-09 00:40:21 molerat

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

回答

相关问题