Question

像滚动时的主导航一样，尝试在滚动时使顶部导航栏保持固定，并且需要在顶部栏的左侧添加社交媒体图标。网站http://www.stephensengineering.com/stephens33/非常感谢您的帮助。：）

我尝试添加职位：粘性但没有运气。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Horizontal Navigation Bar w/Rollover Effect</title> 
<style type="text/css"> 
<!-- 

 #navbar ul { 
    margin: 0; 
    padding: 10px; 
    list-style-type: none;
    text-align: right; 
    background-color: #000; 
    } 

#navbar ul li {  
    display: inline; 
    } 

#navbar ul li a { 
    text-decoration: none; 
    padding: .2em 1em; 
    color: #fff; 
    background-color: #000; 
    } 

#navbar ul li a:hover { 
    color: #000; 
    background-color: #fff; 
    } 

--> 
</style> 
</head> 
<body> 
<div id="navbar"> 
  <ul>
    <li><a href="mailto:project@stephensengineering.com">project@stephensengineering.com</a></li> 
    <li><a href="+18883000642">888-300-0642</a></li> 
    <li><a href="http://github.com">Stephens University</a></li> 
    <li><a href="http://github.com">Submit Assignment</a></li> 
  </ul> 
</div> 
</body> 
</html>

Answer 1

要在用户向下滚动时使顶部的黑色导航栏粘贴在页面上，

  #navbar{
    position: fixed;
    z-index: 100000; /*To bring the navbar to the top of the stacking context*/
    width: 100%;
  }

这将在用户滚动时将元素放置在页面顶部，但是您将遇到一个新问题。黑色导航栏现在与用户滚动时出现的幻灯片主菜单重叠。因此，您需要将滑动主菜单置于顶部黑色导航栏下方。可以通过设置：

  nav.stricky-fixed.fadeInDown.animated{

   top:40px; /*Since this element is already set as relative in the original code,
              the top property places the slideIn menu 40px (height of black nav menu)
              from the top of the page.*/

  }

添加社交图标将需要在HTML代码中添加其他标记。

需要帮助使顶级导航菜单与主菜单保持一致并添加社交媒体图标

1 个答案: