JQuery (document).ready still runs before the document is ready?

Question

While I was doing some web development, I found something very strange.

So below is my JQuery code

$(document).ready(function() {
    $(window).scroll(function() { // check if scroll event happened
        if ($(window).scrollTop() > $("#first-content").offset().top * 0.75) { 
            $(".links").removeClass("white").addClass("black");
            to white (#f8f8f8)
        } else {
            $(".links").removeClass("black").addClass("white"); 
        }
    });
});

So it simply gets some distance from the top to trigger add and remove classes. There has to be only one point that gets triggered unless the structure of the website dynamically changes which I do not think it is possible in my code.

So the problem is that it works fine in the end. When it passes the 0.75*position from top of the window to the top of the element, the font color changes from white to black and again from black to white if I go the other way around.

But what I cannot figure out is that just a few scrolls before the point of trigger that I have set, there is one more point that changes the color from white to black and black to white JUST ONCE every time the browser reloads which is not possible unless the point had shifted very quickly and moved back.

It would be easier to understand if you try yourself.

https://jsfiddle.net/forJ/q6u1hLoh/1/

There has to be only one point of change just above the border of grey and white region.

However, you would be able to see that every time you run the code, there is a premature color change point occuring JUST ONCE before the set point. I am thinking that it has to be the jQuery that is causing the problem and the one that I have pasted is the ONLY jQuery that I have.

Do feel free to take a look at the whole code in the link though and please suggest to me why there is another premature point of trigger.

Thank you

Answer 1

This is because you have an animation attached to the white/black class - adding the class triggers the animation to fire from black to white. You can see this happen onload if you add the white class initially.

<a href="#" class="logo links white">SANCTUM</a>

@keyframes link_white{
  from {color: black;}
  to {color:white;}
}

You can see the change with the class already added in this fiddle - https://jsfiddle.net/evbmhs5z/

Answer 2

A simple solution to this is to see if you want the white, check to see if you have the black, if so no need to add the white, and then the animation doesn't need to fire..

Here is an example, I've also updated it so it does what @clearlight suggested, were the color of each item changes, rather than all of it.

 $(window).ready(function(){ let fc = $('.first-section').height(); console.log(fc); $(window).scroll(function() { // check if scroll event happened var st = $(window).scrollTop(); $('.links').each(function () { var $t = $(this); var black = $t.offset().top > fc; $t.toggleClass('white', !black && $t.hasClass('black')); $t.toggleClass('black', black); }); }); }); 

 *{ margin: 0; padding: 0; } .container{ width: 100%; height: 100%; border: 0; margin: 0; padding: 0; } .links{ padding: 8px 8px 8px 0; text-decoration: none; font-size: 17px; color: white; display: block; } .sidenav{ height: 100%; width: 250px; position: fixed; z-index: 1; top: 0; left: 0; padding-top: 120px; padding-left: 80px; } .first-section{ background-color: grey; width: inherit; height: 800px; margin: auto; } .contents-section{ height: 400px; width: inherit; margin: auto; z-index: 3; } .content-div{ width: 50%; height: inherit; z-index: 2; float: left; margin: auto; float: left; padding-top: 100px; } .content-text-right{ height: auto; max-width: 400px; margin: 50px 50% 0 50px; } .content-text-left{ height: auto; max-width: 400px; margin: 0 50px 0 50%; } @keyframes link_black{ from {color: white;} to {color: black;} } @-webkit-keyframes link_black{ from {color: white;} to {color: black;} } @-moz-keyframes link_black{ from {color: white;} to {color: black;} } @keyframes link_white{ from {color: black;} to {color:white;} } @-webkit-keyframes link_white{ from {color: black;} to {color:white;} } @-moz-keyframes link_white{ from {color: black;} to {color:white;} } .links.black{ animation-name: link_black; animation-duration: 1s; animation-fill-mode: forwards; -webkit-animation-name: link_black; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: forwards; -moz-animation-name: link_black; -moz-animation-duration: 1s; -moz-animation-fill-mode: forwards; } .links.white{ animation-name: link_white; animation-duration: 1s; animation-fill-mode: forwards; -webkit-animation-name: link_white; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: forwards; -moz-animation-name: link_white; -moz-animation-duration: 1s; -moz-animation-fill-mode: forwards; } @media screen and (max-width:1600px){ .first-section{ background-image: url("kitchen.jpg"); width: inherit; height: 700px; margin: auto; background-repeat: no-repeat; background-size: 100%; } } @media screen and (max-width:1400px){ .first-section{ background-image: url("kitchen.jpg"); width: inherit; height: 525px; margin: auto; background-repeat: no-repeat; background-size: 100%; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="sidenav" class="sidenav"> <a href="#" class="logo links">SANCTUM</a> <a href="#" class="links">About</a> <a href="#" class="links">Services</a> <a href="#" class="links">Clients</a> <a href="#" class="links">Portfolio</a> <a href="#" class="links">Blog</a> <a href="#" class="links">Contact</a> </div> <div class="first-section"> </div> <div id="first-content" class="contents-section"> <div class="content-div left"> </div> <div class="content-div"> <div class="content-text-right"> <h2>What is Lorem Ipsum?</h2> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div> </div> </div> </body>