如何将我的导航栏显示为粘性？

Question

<body>
<div class="topnav">
  <!-- Centered link -->
  <div class="topnav-centered">
    <a href="#" class="logo">
      <img src="growmade2.png" style="height: 25px; width: 250px" alt="" />
    </a>
  </div>

  <!-- Left-aligned links (default) -->
  <a href="#news">SHOP</a>
  <a href="#contact">EXPLORE</a>

  <!-- Right-aligned links -->
  <div class="topnav-right">
    <a href="#search">MY CART</a>
  </div>
</div>

** CSS** ** CSS **

   .topnav {
    position: sticky;
    display: block;
    background-color: rgb(255, 255, 255);
    padding: 30px 80px 30px 50px;
  }

  .topnav a {
    font-family: "Roboto", sans-serif;
    font-family: "Roboto Condensed", sans-serif;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 900;
    display: inline-block;
    position: relative;
    color: #000;
    text-align: left;
    margin: 0 10px;
    padding-bottom: 2px;
    text-decoration: none;
  }

Hello I'm new in css.您好，我是 css 的新手。 I want to create a website with static navigation bar but a can't display it static?我想用 static 导航栏创建一个网站，但无法显示它 static？ Can anybody solve this problem?任何人都可以解决这个问题吗？ Thanks in advance!!!提前致谢！！！

Answer 1

Well, you could use fixed position to make a navbar sticky.好吧，您可以使用固定的 position 使导航栏保持粘性。 eg:例如：

    .topnav {
    position: fixed;
    top: 0;
    z-index: 99;
  }

Answer 2

You need to add top: 0 :您需要添加top: 0 ：

 body { margin: 0; padding:0; }.topnav { position: sticky; top: 0; display: block; background-color: rgb(255, 255, 255); padding: 30px 80px 30px 50px; }.topnav a { font-family: "Roboto", sans-serif; font-family: "Roboto Condensed", sans-serif; font-family: "Source Sans Pro", sans-serif; font-weight: 900; display: inline-block; position: relative; color: #000; text-align: left; margin: 0 10px; padding-bottom: 2px; text-decoration: none; }

 <div class="topnav"> <.-- Centered link --> <div class="topnav-centered"> <a href="#" class="logo"> <img src="growmade2:png" style="height; 25px: width: 250px" alt="" /> </a> </div> <!-- Left-aligned links (default) --> <a href="#news">SHOP</a> <a href="#contact">EXPLORE</a> <!-- Right-aligned links --> <div class="topnav-right"> <a href="#search">MY CART</a> </div> </div> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p>

Answer 3

try this:尝试这个：

for sticky navbar on top position用于顶部的粘性导航栏 position

.topnav 
{
    position: sticky;
    top:0;
}

如何将我的导航栏显示为粘性？

问题描述

3 个解决方案

解决方案1
0 2021-11-26 16:11:30

解决方案2
0 2021-11-26 16:15:18

解决方案3
0 2021-11-26 16:19:52

如何将我的导航栏显示为粘性？

问题描述

3 个解决方案

解决方案1 0 2021-11-26 16:11:30

解决方案2 0 2021-11-26 16:15:18

解决方案3 0 2021-11-26 16:19:52

解决方案1
0 2021-11-26 16:11:30

解决方案2
0 2021-11-26 16:15:18

解决方案3
0 2021-11-26 16:19:52