javascript – How to keep the content below sticky navbar when I click on certain section of the page?-ThrowExceptions

Exception or error:

When I click on a section of the page linked in the navbar, the title of that particular section goes below the sticky navbar.
How do I keep the title and rest of the content below the sticky navbar such that the title and content does not hide under the sticky navbar.

HTML Code:

    <!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 Code:

    #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;
    }

As you’ll see the title is going under the sticky navbar.


What I want to achieve is something like this. When I click on Ipsum the title should be below the sticky navbar and not under the navbar hidden. Just like the picture below.

enter image description here

How to solve:

To prevent content from being tucked up under a sticky navbar, you need to add margin-top equal to the height of your navbar to the #content div:


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

###

Add this little bit jQuery code for achieving this:
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);
 })

###

you could achieve this using 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();
    });
});

I added a “nav” class to your ul.
The ‘150’ value should match the height of your total navbar. You can increase this number to leave more whitespace.

###

You need to use scroll-margin-top. (css-tricks example) But this doesn’t work in IE and pre-chromium Edge. If you okay with that then go on with scroll-margin-top.

But if not, for an easy way you can add padding and margin for sections like this:

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

In this way, you “push” titles below the navbar and compensate it by a negative margin.

Although, I strongly recommend you to review your code. E.g. you use a inside button and use justify-content for non-flex block. If this is work, it doesn’t mean that it’s right. I already fix that in this demo:

https://jsbin.com/ceyucolimo/edit?html,output (click Run with 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>

Leave a Reply

Your email address will not be published. Required fields are marked *