CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Joe
Joe

Reputation: 103

Sticky nav makes a weird jump with first scroll (fixed position)

My sticky navigation bar makes this weird jump when I load the page and scroll down a bit. This only happens with the first scroll, it acts normal after that until I reload the page and scroll down again. This probably has to do with the fixed position it gets when I scroll down to make the nav sticky. anynway, here's my code:

/*image resize top nav */

$(document).on("scroll",function(){
    if($(document).scrollTop()>100){
        $("header").removeClass("large").addClass("small");
    } else{
        $("header").removeClass("small").addClass("large");
    }
});

/*-----*/





/*nav */

jQuery(document).ready(function() {

    var navOffset = jQuery("nav").offset().top;

    jQuery("nav").wrap('<div class="nav-placeholder"></div>');
    jQuery(".nav-placeholder").height(jQuery("nav").outerHeight());

    jQuery(window).scroll(function(){
        var scrollPos = jQuery (window).scrollTop();

        if (scrollPos >= navOffset) {
        jQuery("nav").addClass("fixed");
        } else {
        jQuery("nav").removeClass("fixed");

        }

    });                 
});
body {
    background-color: grey;
}

nav {
    z-index: 500;
    background-color: #fff;
}

.nav-placeholder {
    margin: 0 0 40px 0;
}

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


.navigation-bar-top {
    background-color: #FFF;
    width: 100%;
    color: #0E8DBD;
    color: white;
}

.navigation-bar-top img {
    margin-top: 25px;
}


.navigation-bar-top {
    text-align: center;
}


.navigation-bar-top ul {
    background-color: #FFF;
    width: 100%;
    color: #0E8DBD;
    list-style: none;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 30px;
}

.navigation-bar-top li {
    display: inline-block;
    padding: 0 20px 0 20px;
    font-size: 20px;
}

.navigation-bar-top a {
    text-decoration: none;
    color: #0E8DBD;
} 


header,nav, img, li{
    transition: all 1s;
    -moz-transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
}

header.large{
    height: 0px;
}
header.large img { 
    width: 8%; height: 10%;
}

header.small { 
    height: 50px; 
}
header.small img{ 
    width: 8%; height: 6%; margin-top: -10px; 
}

.placeholder {
    min-height: 6000px;
    background: grey;
    color: red;
}

img {
    height: 8%;
    width: 10%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav>
    <br>
    <header class=“large”>
        <div class="navigation-bar-top"><img class="logo" src="https://www.jobboardfinder.net/upload/1c7f578db0e8d9673c95dd5b1c7122c5a36081b0/logo_jobboard.png">
        <ul>
            <li><a href="#">placeholder </li></a>
            <li><a href="#">placeholder</li></a>
            <li><a href="#">placeholder</li></a>
            <li><a href="#">placeholder</li></a>
            <li><a href="#">placeholder</li></a>
            <li><a href="#">placeholder</li></a>
        </ul>
    </div>
</nav>
<div class="placeholder">row1 <br>
        row2<br>
        row3<br>
        row4<br>
        row5<br>

</div>

Thank you for taking the time.

Upvotes: 1

Views: 1144

Answers (2)

Manuel Otto
Manuel Otto

Reputation: 6540

That's because the body element has a default margin, which gets ignored once you switch the nav to fixed. I'm assuming you want the nav to strech over the whole width of the screen, so set margin: 0 and padding: 0 on the body&html tag.

/*image resize top nav */

$(document).on("scroll",function(){
    if($(document).scrollTop()>100){
        $("header").removeClass("large").addClass("small");
    } else{
        $("header").removeClass("small").addClass("large");
    }
});

/*-----*/





/*nav */

jQuery(document).ready(function() {

    var navOffset = jQuery("nav").offset().top;

    jQuery("nav").wrap('<div class="nav-placeholder"></div>');
    jQuery(".nav-placeholder").height(jQuery("nav").outerHeight());

    jQuery(window).scroll(function(){
        var scrollPos = jQuery (window).scrollTop();

        if (scrollPos >= navOffset) {
        jQuery("nav").addClass("fixed");
        } else {
        jQuery("nav").removeClass("fixed");

        }

    });                 
});
body, html {
    background-color: grey;
    padding: 0;
    margin: 0;
}

nav {
    z-index: 500;
    background-color: #fff;
}

.nav-placeholder {
    margin: 0 0 40px 0;
}

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


.navigation-bar-top {
    background-color: #FFF;
    width: 100%;
    color: #0E8DBD;
    color: white;
}

.navigation-bar-top img {
    margin-top: 25px;
}


.navigation-bar-top {
    text-align: center;
}


.navigation-bar-top ul {
    background-color: #FFF;
    width: 100%;
    color: #0E8DBD;
    list-style: none;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 30px;
}

.navigation-bar-top li {
    display: inline-block;
    padding: 0 20px 0 20px;
    font-size: 20px;
}

.navigation-bar-top a {
    text-decoration: none;
    color: #0E8DBD;
} 


header,nav, img, li{
    transition: all 1s;
    -moz-transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
}

header.large{
    height: 0px;
}
header.large img { 
    width: 8%; height: 10%;
}

header.small { 
    height: 50px; 
}
header.small img{ 
    width: 8%; height: 6%; margin-top: -10px; 
}

.placeholder {
    min-height: 6000px;
    background: grey;
    color: red;
}

img {
    height: 8%;
    width: 10%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav>
    <br>
    <header class=“large”>
        <div class="navigation-bar-top"><img class="logo" src="https://www.jobboardfinder.net/upload/1c7f578db0e8d9673c95dd5b1c7122c5a36081b0/logo_jobboard.png">
        <ul>
            <li><a href="#">placeholder </li></a>
            <li><a href="#">placeholder</li></a>
            <li><a href="#">placeholder</li></a>
            <li><a href="#">placeholder</li></a>
            <li><a href="#">placeholder</li></a>
            <li><a href="#">placeholder</li></a>
        </ul>
    </div>
</nav>
<div class="placeholder">row1 <br>
        row2<br>
        row3<br>
        row4<br>
        row5<br>

</div>

Upvotes: 0

Samir
Samir

Reputation: 38

Add the fixed class to the nav in html.

https://jsfiddle.net/9zk18nch/

Upvotes: 1

Related Questions