Wordpress header fixed jumps on scroll

Question

I am trying to make the header fixed on scroll.

I wrote this code but it's not working properly ,also if you scroll down you will see it jumps.Here is the website . Thank You.

  <script >
 $(document).ready(function($) {
  jQuery(window).scroll(function () {
    if (jQuery(this).scrollTop() > 40) {
        jQuery('#masthead').addClass('small-logo');
    } else {
        jQuery('#masthead').removeClass('small-logo');
    }
});
 jQuery(window).scroll(function () {
    if (jQuery(this).scrollTop() > 40) {
        jQuery('#site-navigation').addClass('fixed-menu');
    } else {
        jQuery('#site-navigation').removeClass('fixed-menu');
    }
   });
});

 </script>


   .small-logo{
     position:fixed;
     width: 100%;
     z-index: 999;
 }
  .fixed-menu{
     position:fixed;
     margin-top: 0;
     top:160px;
   }

When you use position: fixed you take the header out of the flow - this means that content below it jumps up.. you need to offset that — sol, Feb 12 '17 at 19:58
Bogdan, your code appears to be working well. the jump is happening because when the function is triggered and your header becomes fixed, It causes the rest of the DOM content to shift upwards as the header is removed from the flow of the document. Wrap it in a div with a fixed height matching the height of the nav. it will stop the jumping. — Matthew Brent, Feb 12 '17 at 19:58
It might be just opinion...but also having such a large header can be a bit much from a ux perspective. Try only fixing the actual nav and have it fix when it hits the top of the window — Matthew Brent, Feb 12 '17 at 20:01
@matthew brent i want to make the logo smaller on scroll also . Can you help me out ? ^_^ ty — Bogdan Laza, Feb 12 '17 at 20:05
@BogdanLaza Take a look at this answer - http://stackoverflow.com/a/17842921/5561605 — sol, Feb 12 '17 at 20:22
@ovokuro i see but it wont help me , i want it fixed whille i scroll down the page . — Bogdan Laza, Feb 12 '17 at 20:24

score 1 · Answer 1 · edited Feb 12 '17 at 20:45

1

It's normal behavior for your code. It's not easy to write a good fixed header with animation. I use this plugin and it works nice for me http://leafo.net/sticky-kit/

In document ready:

$('.your-sticky-item-class').stick_in_parent();

See all the instructions on their site.

edited Feb 12 '17 at 20:45

Christina

34,296
17
83
119

answered Feb 12 '17 at 20:02

Alexander Nikolaenko

167
10

score 0 · Answer 2 · answered Feb 12 '17 at 20:56

As myself and @ovokuro mentioned in the comments, its because you are taking it out of the document flow. see the simple example on codepen here.

To make the logo smaller use exactly the same principal...add a class at the desired trigger point that makes the element smaller with css. You could add a simple css transition to make it look 'prettier'

Hope this helps

$(document).ready(function() {
  $(window).scroll(function () {
    if ($(this).scrollTop() > 300) {
      $('.nav-fixed-container').addClass('fixed');
    } else {
      $('.nav-fixed-container').removeClass('fixed');
    }
  });
});

body {
  margin:0;
}
/*add the fixed height here.. we could also retrieve this using jquery*/
.nav-container {
  height:130px;
  width:100%;
  margin:0;
  white-space: nowrap;
  font-size: 0;
}
.masthead {
  width:100%;
  background:red;
  margin:0;
  font-size:18px;
}
.logo {
  width:90px;
  height:90px;
  background:purple;
  font-size:18px;
}

.body {
  width:100%;
  height:1800px;
  background:green;
  padding:0;
  font-size:18px;
}
li {
  float:left;
  list-style:none;
 margin-right:20px;
  font-size:18px;
}
.nav {
  background:blue;
  width:100%;
  height:40px;
}
.nav-fixed-container {
  width:100%;
  transition: 0.5s ease-In-Out;
}
.fixed {
  position:fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-container">
  <div class="nav-fixed-container">
    <div class="masthead">
      <div class="logo">logo</div>
    </div>
    <div class="nav">
      <ul>
        <li>menu link 1</li>
        <li>menu link 2</li>
        <li>menu link 3</li>
        <li>menu link 4</li>
      </ul>
    </div>
  </div>
</div>

<div class="body">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed fringilla diam, at facilisis eros. Nulla molestie urna neque, ac tristique odio ullamcorper et. Nulla nec elit non velit euismod consectetur. Fusce rhoncus pharetra imperdiet. Suspendisse quis felis maximus, porttitor ante at, egestas augue. Pellentesque est augue, venenatis in felis vitae, venenatis malesuada nunc. In eget fermentum neque. Sed vitae dapibus diam. Fusce vehicula augue eu ornare euismod. Etiam rutrum eu turpis in ullamcorper. Mauris facilisis faucibus rutrum
  <br><br><br>. Sed ac justo et purus luctus cursus. Nulla non sapien molestie ipsum bibendum mollis.

Integer convallis sodales dui, in cursus tellus vestibulum sit amet. Integer id enim laoreet, vehicula metus et, condimentum urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id commodo dolor, vel commod<br><br><br><br>o odio. Nam ipsum nisl, volutpat ac sapien aliquet, suscipit consectetur nisi. Mauris scelerisque risus dui, sed viverra libero rhoncus et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridicul<br><br><br>us mus. Sed blandit, ante in dapibus posuere, urna leo efficitur ipsum, in ornare ligula nunc et eros.
<br><br>
Ut bibendum libero dolor, quis tempor est dapibus nec. Etiam dapibus justo ac risus mattis, nec convallis augue tincidunt. Duis varius id ligula sed scelerisque. Nam at elementum mauris. Nullam<br><br><br> mattis, mauris sit amet dapibus lobortis, diam nibh gravida neque, nec rutrum nunc mauris sed elit. Nulla et est consectetur, dapibus felis at, fermentum ante. Sed orci ipsum, luctus ac imperdiet vitae, ornare sit amet leo. Quisque sit amet dolor neque. Aenean ac lorem quam. Curabitur massa est, rhoncus ac iaculis sit amet, maximus id ante. Aene<br><br>an aliquam tincidunt nunc sit amet hendrerit. Nulla consectetur velit vitae dignissim dictum. Vivamus gravida pharetra sem in vestibulum. Nulla </div>

Wordpress header fixed jumps on scroll

2 Answers2