当我点击页面的某个部分时，如何将内容保持在粘性导航栏下方？答案

【问题标题】：How to keep the content below sticky navbar when I click on certain section of the page?当我点击页面的某个部分时，如何将内容保持在粘性导航栏下方？
【发布时间】：2020-02-21 16:30:11
【问题描述】：

当我单击导航栏中链接的页面部分时，该特定部分的标题位于粘性导航栏下方。
如何将标题和其余内容保留在粘性导航栏下方，以便标题和内容不会隐藏在粘性导航栏下方。

HTML 代码：

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="ex.css">
    </head>

    <body>
        <header>
        <div id="nav-container">
            <nav class="navbar">
                <ul>
                    <button class="nav-btn"><li><a href="#lorem">Lorem</a></li></button>
                    <button class="nav-btn"><li><a href="#ipsum">Ipsum</a></li></button>
                    <button class="nav-btn"><li><a href="#dolor">Dolor</a></li></button>
                    <button class="nav-btn"><li><a href="#sit">Sit</a></li></button>
                </ul>
            </nav>
        </div>
        <div id="content">
            <section id="lorem">
            <h1>Lorem </h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </section>

            <section id="ipsum">
            <h1>Ipsum</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </section>

            <section id="dolor">
            <h1>Dolor</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </section>

            <section id="sit">
            <h1>Sit</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </section>
    </div>
    </body>
    </html>

CSS 代码：

    #nav-container{
        border-bottom: solid 1px black;
        width: 100%;
        background: #1c1b1b;
        position: sticky;
        top: 0;
        height: 100px;
        padding-top: 50px;
    }

    nav{
        display: inline-block;
        margin: auto;
        max-width: 100vw;
        width: 100%;
        align-items: center;
        text-align: center;
        float: center;

    }

    nav > ul{
        display: inline-block;
        margin: 0;
        justify-content: center;
    }

    nav > ul >.nav-btn>li{
        padding: 0px;
        margin-bottom: 0px;
        font-size:17px;
        list-style-type: none;
        padding:10px 0px;
        cursor: pointer;
        height: 44px;
        color: white;

    }

    .nav-btn{
        background-color: #1c1b1b;
        border: none;
        border: solid 2px white;

    }

    .nav-btn:hover{ 
        background-color: white;
        transition: 0.3s;
        transition-timing-function: ease-in-out;
    }
    a:hover{
        color: black;
    }
    a{
        text-decoration: none;
        color: white;
        padding: 10px 35px;
    }

    #content{
        width: 60%;
        margin: auto;
        text-align: center;
        font-size: 2em;
    }

如您所见，标题位于粘性导航栏下方。

我想要实现的是这样的。当我单击 Ipsum 时，标题应位于粘性导航栏下方，而不是隐藏在导航栏下方。就像下图一样。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

为防止内容被隐藏在粘性导航栏下，您需要将等于导航栏高度的margin-top 添加到#content div：


    #content {
        /* ... */
        margin-top: 100px;
    }

【讨论】：

【解决方案2】：

添加一些 jQuery 代码来实现这一点： https://jsfiddle.net/5bhqt6oz/

 $('.nav-btn').click(function(event){
    event.preventDefault();
    var id = $(this).find('a').attr('href');
    $('html, body').animate({
       scrollTop: $(id).offset().top - 160 //change this 160 according navbar height
   }, 600);
 })

【讨论】：

【解决方案3】：

你可以使用 jQuery 来实现。

https://jsfiddle.net/9oynpdmj/

$(function() {
    $('ul.nav a').bind('click',function(event){
    event.preventDefault();
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top - 150
        }, 1000);
        event.preventDefault();
    });
});

我在你的 ul 中添加了一个“导航”类。 '150' 值应该与您的总导航栏的高度相匹配。您可以增加此数字以留下更多空白。

【讨论】：

【解决方案4】：

您需要使用scroll-margin-top。 (css-tricks example) 但这在 IE 和 pre-chromium Edge 中不起作用。如果您同意，请继续使用scroll-margin-top。

但如果没有，您可以为以下部分添加内边距和边距，这是一种简单的方法：

#content section {
     padding-top: 160px;
     margin-top: -160px;
}

通过这种方式，您将标题“推”到导航栏下方并以负边距补偿它。

不过，我强烈建议您检查您的代码。例如。您在 button 中使用 a 并在非弹性块中使用 justify-content。如果这是有效的，并不意味着它是正确的。我已经在这个演示中解决了这个问题：

https://jsbin.com/ceyucolimo/edit?html,output（点击用js运行）

#content section {
    padding-top: 160px;
    margin-top: -160px;
}
#nav-container {
    border-bottom: solid 1px black;
    width: 100%;
    background: #1c1b1b;
    position: sticky;
    top: 0;
    height: 100px;
    padding-top: 50px;
}
nav {
    display: inline-block;
    margin: auto;
    max-width: 100vw;
    width: 100%;
    align-items: center;
    text-align: center;
    float: center;
}
nav > ul {
    display: inline-block;
    margin: 0;
    justify-content: center;
}
nav > ul >.nav-btn>li {
    padding: 0px;
    margin-bottom: 0px;
    font-size:17px;
    list-style-type: none;
    padding:10px 0px;
    cursor: pointer;
    height: 44px;
    color: white;
}
.nav-btn {
    background-color: #1c1b1b;
    border: none;
    border: solid 2px white;
}
.nav-btn:hover {
    background-color: white;
    transition: 0.3s;
    transition-timing-function: ease-in-out;
}
a:hover {
    color: black;
}
a {
    text-decoration: none;
    color: white;
    padding: 10px 35px;
}
#content {
    width: 60%;
    margin: auto;
    text-align: center;
    font-size: 2em;
}

<div id="nav-container">
  <nav class="navbar">
    <ul>
      <button class="nav-btn"><li><a href="#lorem">Lorem</a></li></button>
      <button class="nav-btn"><li><a href="#ipsum">Ipsum</a></li></button>
      <button class="nav-btn"><li><a href="#dolor">Dolor</a></li></button>
      <button class="nav-btn"><li><a href="#sit">Sit</a></li></button>
    </ul>
  </nav>
</div>
<div id="content">
  <section id="lorem">
    <h1>Lorem </h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>

  <section id="ipsum">
    <h1>Ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>

  <section id="dolor">
    <h1>Dolor</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>

  <section id="sit">
    <h1>Sit</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>
</div>

【讨论】：