Javascript 内容覆盖在导航栏上

我用django创建博客网站在添加导航栏后遇到了一个问题，问题是当我向下滚动页面时，网站的内容与导航栏重叠。 或者，如果你知道如何用比这更好的方式添加粘性导航栏，请告诉我。我曾经添加过这个导航栏。总之，这是我的代码

   {% 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%}

{%extends“base.html”%}
{%block content%}
身体{
字体系列：“Roboto”，无衬线；
字号：18px；
背景色：#fdfd；
背景图片：url（“images/background.png”）；
}
.head_文本{
颜色：白色；
}
.卡片{
盒影：0 16px 48px#E3E7EB；
}
#导航栏{
溢出：隐藏；
背景色：#333；
}
#导航栏a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
#导航栏a：悬停{
背景色：#ddd；
颜色：黑色；
}
#导航条a.激活{
背景色：#04AA6D；
颜色：白色；
}
.内容{
填充：16px；
}
.粘的{
位置：固定；
排名：0；
宽度：100%；
}
.粘性+.内容{
填充顶部：60px；
}
window.onscroll=function（）{myFunction（）}；
var navbar=document.getElementById（“navbar”）；
var sticky=navbar.offsetTop；
函数myFunction（）{
如果（window.pageYOffset>=粘性）{
navbar.classList.add（“粘性”）
}否则{
navbar.classList.remove（“粘性”）；
}
}
{post_list%}中的post为%
{{post.title}}
{{post.author}}}{{post.created}}
{{post.content|slice:：200}
{%endfor%}
{%块边栏%}
{%include'sidebar.html%}
{%endblock侧边栏%}
{%endblock%}

在css中更新此选项：

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

如果不起作用，则也添加以下内容：

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

---

看看这里的粘性：你能显示一张图片吗？这是谷歌驱动器与scrshoot的链接，请检查readme.txt文件，以了解我需要访问的想法。到文件中。完成