Sticky JS falling behind?

http://lit tl es na lsi

The idea is that when that logo / menu in the dark blue gets to 0 viewport postion(aka at the top), the body element will grab that elements height and add padding-top to it so that the content wont jump up. However,it looks like when it gets to the top, for the next 100 or so pixels, if you scroll slowly, its being weird. Like, look at hte console. This is my code

 $(window).scroll(function () {
      console.log($(".header-container").offset().top - $(window).scrollTop());
      if($(".header-container").offset().top - $(window).scrollTop() < 1) {
        $(".nav-main .fsNavParentPage").removeClass("not-enabled");
        $("body").css("padding-top", $(".site-info-container > .sticky-wrapper >.fsElement.fsContent").height());
      else {
        $(".nav-main .fsNavParentPage").addClass("not-enabled");
        $("body").css("padding-top", 0);

Look at the console - it is accurate until it reaches the top, then it does like 0px, 133px, 0, 111px, etc. It causes jumpiness. I don’t how to explain it. You should be able to see it. Ideally, there is no jumpiness, and then I’ll need to add the padding on the body once that’s fixed…

I believe that since hte padding is being added, that’s another x amount of pixels it has to go through so it’s jumping…

All fixed. Changed the padding placement / did a workaround.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.