Header fixed with border - the border should only shown by scrolling

Question

I have coded my index.html with bootstra4 and have the header with border and the class sticky. I want the border only shown when the page is scrolled.

HTML

    <!-- TOP NAV -->
    <header id="topNav">
        <div class="container">
      .....

</div>

CSS

#header.shadow-after-3:before {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 60px;
    bottom: -60px;
    background-image: url(../images/misc/shadow3.png);
    background-size: 100% 100%;
}

JS

The code of my js will not insert here - if it is nessasary i will try it again

Answer 1

With Javascript you can solve it easily.

$(window).scroll(function() {
    if ($(this).scrollTop() > 250){  
        $('header').addClass("borderClass");
    }
    else{
        $('header').removeClass("borderClass");
    }
});

Answer 2

1. Remove the box-shadow attribute from #header:

Should be like this:

    #header {
        position: relative;
        left: 0;
        top: 0;
        right: 0;
        z-index: 1000;
        font-size: 14px;
        background-color: #fff;
        border-bottom: rgba(0,0,0,0.05) 1px solid;
        -webkit-transition: all .800s;
        -moz-transition: all .800s;
        -o-transition: all .800s;
        transition: all .800s;
    }

2. Then change border-bottom attribute in #header.transparent to border-bottom: none;

Should be like this:

#header.transparent {
    position: absolute;
    background-color: transparent;
    border-bottom: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

3. Lastly, find and replace #header.shadow-after-3:before to #header.fixed.shadow-after-3:before in your CSS.

When the page is scrolled it adds the fixed class to header element that's why we should style this class.