html - 部分区域隐藏在粘性导航栏后面

问题描述

我在我的页面中使用粘性导航栏。但是我看到，当我尝试通过导航链接转到该部分时，部分的某个部分隐藏在导航栏后面。我希望我的整个部分区域在导航栏下方可见。我尝试编写 jquery 代码来设置偏移量，但它没有帮助。

这是我的导航栏代码

 <header  id="navigation-items" style="width:100%; z-index: 99;"> 
        <nav class="navbar navbar-expand-lg navbar-light " style="background-color: #7ea7ca;">
            <div class="container-fluid">
              <a class="navbar-brand" href="#">Navbar</a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#section1">Section 1</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#section2">Section 2</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#section3">Section 3</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link " href="#section4">Section 4</a>
                  </li>
                </ul>
                
              </div>
            </div>
          </nav>
    </header>

这是部分代码：

<div class="main">
    <section id="section1"><div class="container">..Section 1..</div> </section>
    <section id="section2"><div class="container">..Section 2..</div> </section>
    <section id="section3"><div class="container">..Section 3..</div> </section>
    <section id="section4"><div class="container">..Section 1..</div> </section>
<div>

这是我为偏移部分写的jquery

$(document).ready(function(){

/* For setting the offset header */

var headerHeight = $("#navigation-items").height();

$('a[href*="id"]').bind("click", function(e) {

  e.preventDefault();

  var target = $(this).attr("href"); //Get the target
  var scrollToPosition = $(target).offset().top - (headerHeight);
  $('html').animate({
    'scrollTop': scrollToPosition
  }, 300, function(target) {
    window.location.hash = target;
  })

});
  });

这是我的代码的css

.main>section{
  border:1px solid red;
  padding-top:80px
   }

.main>section>.container{
  background-color: rgba(231, 158, 158, 0.884);
}

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

   }
    ```

I am using bootstrap 5 and jquery version 3.5.1. [Link to HTML page and issue][1]


  [1]: https://codepen.io/maddy-176/pen/abyWZEQ

标签： htmljquery

html - 部分区域隐藏在粘性导航栏后面

问题描述

解决方案

推荐阅读