CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sami Leier
Sami Leier

Reputation: 61

How to stop content from jumping after navbar becomes fixed on scroll?

I have a navbar about 1/3 down the landing page, once the user scrolls to the navbar it becomes sticky and is fixed to the top.

The problem I am having is once the script kicks in and the navbar becomes sticky, the content below it jumps up, becoming partly hidden by the newly fixed navbar.

I want this to be a smooth transition, but this little jump is unsettling.

Any ideas on how I can fix this?

$(function() {
  var distance = $('.desktop-nav').offset().top,
      $window = $(window);
  $window.scroll(function() {
    $('.desktop-nav').toggleClass('fixedtop', $window.scrollTop() >= distance)
  });
});
ul {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 15px;
  padding-left: 0;
  background-color: white;
}
.fixedtop {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: white;
  height: 50px;
  box-shadow: 0 5px 60px rgba(0,0,0,0.08);
  margin-top: 0px;
}
#portfolio {height: 200vh;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="desktop-head">
  <img class="desktop-logo" src="img/logo.png" alt="">
  <ul class="desktop-nav">
    <li><a href="index.html" class="active">PORTFOLIO</a></li>    		
    <li><a href="#">ABOUT ME</a></li>
    <li><a href="#">RESUME</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</div>
<div id="portfolio"></div>

Upvotes: 0

Views: 1103

Answers (2)

Par Tha
Par Tha

Reputation: 1531

Try this,

$(function() {
  var distance = $('.desktop-nav').offset().top,
    $window = $(window);
    $window.scroll(function() {
    var dh = $('.desktop-nav').height();
    $('.desktop-nav').toggleClass('fixedtop', $window.scrollTop() >= distance, "easeOutSine");
    if($('.desktop-nav').hasClass('fixedtop')){
      $('body').css('margin-top', dh+dh );
    }else{
      $('body').css('margin-top', 0 );
    }
  });
});
body{
margin:0;  
} 
ul {
        text-align: center;
        padding-top: 20px;
        padding-bottom: 15px;
        padding-left: 0;
        background-color: white;
    }
    .fixedtop {
        position: fixed;
        top: 0;
        width: 100%;
        background-color: white;
        /* height: 50px; */
        box-shadow: 0 5px 60px rgba(0,0,0,0.08);
        margin-top: 0px;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="desktop-head">
        <img class="desktop-logo" src="img/logo.png" alt="">
        <ul class="desktop-nav">
            <li><a href="index.html" class="active">PORTFOLIO</a></li>          
            <li><a href="#">ABOUT ME</a></li>
            <li><a href="#">RESUME</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </div>

    <div id="portfolio">
      <pre>
      stackoverflow
      stackoverflow
      stackoverflow
      stackoverflow
      stackoverflow
      stackoverflow
      stackoverflow
      stackoverflow
      stackoverflow
      stackoverflow
      stackoverflow
      stackoverflow
      stackoverflow
      stackoverflow
      stackoverflow
      stackoverflow
      stackoverflow
      stackoverflow
      stackoverflow
      stackoverflow
      stackoverflow
      stackoverflow
      stackoverflow
      stackoverflow
      stackoverflow
      stackoverflow
      stackoverflow
      stackoverflow
      
</pre>
    </div>

Upvotes: 1

Benjamin James Kippax
Benjamin James Kippax

Reputation: 653

There’s a couple of options here.

Firstly, depending on your support requirements, you could simple use position:sticky on the element in question. This falls back to position:relative on unsupported browsers. If you choose this route, you’ll have no need for the fixedTop class.

Secondly, you could continue using the same method, only position the navbar absolutely on its parent and set a padding-top on the parent, so that the content doesn’t jump. When the element becomes sticky, the padding will preserve the other contents position.

Upvotes: 0

Related Questions