javascript - 调整大小的导航栏隐藏了网站内容

Question

我目前正在创建一个可垂直滚动且顶部有导航栏的网站，如图所示。当用户不在最顶部时，导航栏会变大，这实现为:

if (window.scrollY == nav.offsetTop) {
    document.querySelector('.nav').classList.add("largerNavbar");
} else {
    document.querySelector('.nav').classList.remove("largerNavbar");
}

因此，在 javascript 中，它只是向导航栏添加了一个具有更大高度的新类。但问题是，它隐藏了第二行的内容。第二行的样式如下:

div#firstRow {
    padding: 10px;
    width: 100%;
    //position: relative;
    margin:0 auto;
    line-height: 1.4em;
    background-color: green;
}

我注释掉了 position: relative 因为第二行会隐藏导航栏。

这里有什么问题？

编辑:

$font-stack: Helvetica, sans-serif;$原色:#333；

body {

    height: 100%;
    font: 100% $font-stack;
    color: $primary-color;
    margin: 0px;

    .largerNavbar .nav{
        font-size: 20px;
        height: 90px;
    }

    .largerNavbar #firstRow {
        font-size: 20px;
        height: 90px;
    }

    .onSection {

        background-color: gray;

    }

    .nav{

        color: white;

        //vertical center
        display: flex;
        align-items: center;
        font-size: 12px;
        height: 70px;
        overflow: hidden;
        background-color: #333;
        transition:all 1s;
        -webkit-transition:all 1s; 

        .menus {

            position: absolute;
            right: 0px;
            padding: 10px;
        }

        .logo {

            position: absolute;
            left: 0px;
            padding: 10px;          

        }

    }

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

    .nav a {
        color: white;
        float: left;
        display: block;
        text-align: center;
        padding: 14px;
        text-decoration: none;
    }

    div#firstRow {
        padding: 10px;
        width: 100%;
        //position: relative;
        margin:0 auto;
        line-height: 1.4em;
        background-color: green;
  }

    div#secondRow {
        padding: 10px;
        //position: relative;
        margin:0 auto;
        line-height: 1.4em;
        background-color: blue;
  }

    div#thirdRow {
        padding: 10px;
        //position: relative;
        margin:0 auto;
        line-height: 1.4em;
        background-color: yellow;
    }

      div#lastRow {
        height: 100px;
        background-color: black;
    }

}

    <div class="logo">
        HOME
    </div>

    <div class="menus">
            <span><a href="#about">About</a></span>
            <span><a href="#archive">Archive</a></span>
            <span><a href="#projects">Projects</a></span>
            <span><a href="#contact">Contact</a></span>
    </div>
</div>   

<div id="firstRow">
    <a id="about" class="smooth"></a>

</div> 


<div id="secondRow">
    <a id="history"></a>

</div> 

<div id="thirdRow">
    <a id="contact"></a>

</div> 

<div id="fourthRow">
    <a id="contact"></a>

</div> 

<div id="lastRow">
    <a id="footer"></a>
    footer goes here
</div> 
<script src="bundle.js" type="text/javascript"></script>

Answer 1

我猜你给了导航栏 absolute 或 fixed 定位。

如果是这样的话，我会尝试将 largerNavbar 类添加到一个元素中，该元素是导航栏和绿色容器的父元素，然后有一些 CSS 选择器可以改变导航栏的height 属性和绿色容器的 padding-top 属性同时存在。

所以像这样:

.largerNavbar .nav {
    ...
    height: 120px; // Use the same height for both
}

.largerNavbar #firstRow {
    ...
    padding-top: 120px // Use the same height for both
}

添加一些 CSS 过渡，它应该看起来很棒。祝你好运!