Question

我正在用 django 制作博客网站我在添加导航栏后遇到问题，问题是当我向下滚动页面时，网站的内容与导航栏重叠。或者，如果您知道如何以比这更好的方式添加粘性导航栏，请告诉我。我曾使用w3 school web site 添加此导航栏。无论如何，这是我的代码。

   {% extends "base.html" %}
      
 {% block content %}
<style>
    
    body {
        font-family: "Roboto", sans-serif;
        font-size: 18px;
        background-color: #fdfdfd;
        background-image: url("images/background.png");
    }

    .head_text{
    color: white;
  }
    .card{
    box-shadow: 0 16px 48px #E3E7EB;
}
      #navbar {
        overflow: hidden;
        background-color: #333;
      }

      #navbar a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
      }

      #navbar a:hover {
        background-color: #ddd;
        color: black;
      }

      #navbar a.active {
        background-color: #04AA6D;
        color: white;
      }

      .content {
        padding: 16px;
      }

      .sticky {
        position: fixed;
        top: 0;
        width: 100%;
      }

      .sticky + .content {
        padding-top: 60px;
      }
    </style>

    <!-- Nav bar -->
      <div id="navbar">
        <a class="active" href="javascript:void(0)">Home</a>
        <a href="javascript:void(0)">News</a>
        <a href="javascript:void(0)">Contact</a>
      </div>
      <script>
      window.onscroll = function() {myFunction()};

      var navbar = document.getElementById("navbar");
      var sticky = navbar.offsetTop;

      function myFunction() {
        if (window.pageYOffset >= sticky) {
          navbar.classList.add("sticky")
        } else {
          navbar.classList.remove("sticky");
        }
      }
      </script>
            <div class="content ">
              <div class="container">
                <div class="row">
      
              <!-- Blog Entries Column -->
              <div class="col-md-8 mt-3 left">
                    {% for post in post_list %}
                <div class="card mb-4" >
                  <div class="card-body">
                    <h2 class="card-title">{{ post.title }}</h2>
                    <p class="card-text text-muted h6">{{ post.author }} | {{ post.created_on}} </p>

                    <p class="card-text">{{post.content|slice:":200" }}</p>
                    <a href="{% url 'post_detail' post.slug  %}" class="btn btn-primary">Read More &rarr;</a>
                  </div>           
                </div>

                {% endfor %}
            </div>
                {% block sidebar %}
                {% include 'sidebar.html' %}
                {% endblock sidebar %}
            </div>
        </div>
        </div>
{%endblock%}

Answer 1

在你的 css 中更新：

#navbar {
   overflow: hidden;
   background-color: #333;
   z-index: 9999999;
}

如果这不起作用，那么也添加这个：

.sticky {
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 9999999;
}
Hope it works!

内容与导航栏重叠

1 个答案: