调整大小的导航栏将隐藏网站内容

Question

I am currently creating a website that is vertically scroll-able and has a navbar on the top as shown in the image. The navbar gets bigger when the user is not on the very top and this is implemented as:

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

In javascript, so, it just adds a new class that has larger height to the navbar. But the problem is, it hides the content of the 2nd row. The 2nd row's style looks like:

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

I commented out the position: relative because then the 2nd row will hide the navbar.

What is the problem here?

EDIT:

$font-stack: Helvetica, sans-serif; $primary-color: #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

I'm guessing that you gave the navbar either absolute or fixed positioning.

If that's the case, I would try adding that largerNavbar class to an element that is a parent to both your navbar and your green container there, and then have some CSS selectors that alter both the navbar's height property and the green container's padding-top property at the same time.

So something like this:

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

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

Add some CSS transitions and it should look great. Good luck!