http://lit tl erock.red es ign.fi na lsi te.com/
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…