jQuery parallax effect and lagging

Question

I have a page with a header and a content. When scrolling down, the header menu sticks to the top while the content has a kind of "parallax" effect (it moves up faster than the header does, which is what I need).

My small jQuery script works well for the "parallax" effect but when the scroll down is at its max, the content starts to stutter/lag. The script seems to keep on trying to move the content up continuously (at least with an Apple Magic Mouse), which creates this ungraceful side effect.

How can I prevent that ?

PS: I exaggerated the parallax effect in the JSFiddle in order to clearly show the stuttering issue.

PPS: make sure you have a scrollable page when testing (small browser height), otherwise, the effect and issue won't happen, of course.

 //sticky header menu $(window).scroll(function() { if ($(document).scrollTop() > 92) { if (!$('.fixed').length) { $('.menu').addClass('fixed'); } } else { if ($('.fixed').length) { $('.menu').removeClass('fixed'); } } }); // Parallax of content on scroll var iCurScrollPos = 0; $(window).scroll(function() { iCurScrollPos = $(this).scrollTop(); $('.content').css('margin-top', -iCurScrollPos * 1.2 + 'px') }); 

 body { width: 100%; height: 100%; margin: 0px; padding: 0px; background: #ccc; } header { position: relative; width: 100%; background: #fff; z-index: 1; height: 146px; } .void { position: relative; width: 100%; height: 100px; } .menu { position: relative; width: 100%; height: 54px; background: #aaa; } .fixed { position: fixed; left: 0px; top: 0px; } img { width: 100% } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <header> <div class="void"></div> <nav class="menu"></nav> </header> <div class="content"> <img src="https://farm8.staticflickr.com/7632/16990947835_3894284fd8_b.jpg"> </div> 

JSFiddle

https://jsfiddle.net/v6g43mkL/1/

Answer 1

You could use the history of scroll positions to determine if the stutter effect is happening by comparing if the last 2 locations are the same as the 3rd and 4th:

$(window).scroll(function() {
    if ($(document).scrollTop() > 92){
            if (!$('.fixed').length){$('.menu').addClass('fixed');}
        } 
        else {
              if ($('.fixed').length){$('.menu').removeClass('fixed');}                    
    }     
});

// Parallax of page on scroll

var iCurScrollPos = 0;
// Contains the last 4 scroll positons.
var lastPositions = [];

$(window).scroll(function () {
    iCurScrollPos = $(this).scrollTop();

    lastPositions.push(iCurScrollPos);
    // Control over when locaties are marked as duplicates. Use it to fine tune the response.
    var duplicateRange = 20;

    // The stutter bug can be caught be checking if two last locations are the same as the 3rd and 4th.
     if(Math.abs(lastPositions[0] - lastPositions[2]) < duplicateRange && Math.abs(lastPositions[1] - lastPositions[3]) < duplicateRange){
      lastPositions = [];
       return;
    }

      console.log(lastPositions);
    if(lastPositions.length === 4){
      lastPositions = [];
    }



   $('.content').css('margin-top',-iCurScrollPos*1.2+'px')
});

jsFiddle: https://jsfiddle.net/maartendev/sj5egqhd/25/

Answer 2

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<header>
    <div class="void"></div>
    <nav class="menu">
    </nav>
</header>
<div class="content">
    <!-- Picture displayed twice for the example only -->
    <!-- to be sure everyone gets scollable page-->
    <img src="https://farm8.staticflickr.com/7632/16990947835_3894284fd8_b.jpg">
    <img src="https://farm8.staticflickr.com/7632/16990947835_3894284fd8_b.jpg">
</div>
<style>
body{
      width:100%;
      height:100%;
      margin:0px;
      padding:0px;
    background: #ccc;
}

header{
      position:relative;
      width:100%;
      background: #fff;
      z-index:1;
    height:146px;
}

.void{
      position:relative;
      width:100%;
        height:100px;
}

.menu{
      position:relative;
      width:100%;
    height:54px;
    background:#aaa;
}

.fixed{
    position: fixed;
    left:0px;
    top: 0px;
}

img{
  width:100%
}
</style>




<script>
// Sticky header menu

$(window).scroll(function() {
    if ($(document).scrollTop() > 92){
        if (!$('.fixed').length){$('.menu').addClass('fixed');}
    }else {
        if ($('.fixed').length){$('.menu').removeClass('fixed');}                  
    }     
});

// Parallax of page on scroll

var iCurScrollPos = 0;
$(window).scroll(function () {
console.log(iCurScrollPos ,iCurScrollPos - screen.height,$(window).height());
var max_sc = iCurScrollPos - screen.height;
    iCurScrollPos = $(this).scrollTop();
    if(iCurScrollPos < max_sc)
        $('.content').css('margin-top',-iCurScrollPos*1.2+'px')
});
</script>

You have to stop your scrolling event when you are at the end of the document.

To calculate you page end iCurScrollPos - screen.height .

Find the jsfiddle link for same. https://jsfiddle.net/cpo73s5g/

Answer 3

You can also achieve smooth scroll behavior by adding the following line to your CSS

 html{
     scroll-behavior:smooth;
   }

for more detail read Smooth Scrolling MDN or Caniuse