延迟addClass jQuery

Question

I've created a sticky nav on scroll with a header above which shrinks. Now I'm trying to get the logo to come in from the left when the nav becomes sticky. It works but its coming in too early. If you have a look at my demo you can see that it comes in over the header which I don't want. Is there any way I can delay it coming in until the nav is fixed to the top?

demo: https://codepen.io/Reece_Dev/pen/xqaEZX

 $(document).on("scroll", function() { if ($(document).scrollTop() > 20) { $("header").addClass("shrink"); //setTimeout(function(){ $(".logo_animated").addClass("logo_display"); //}, 900); } else { $("header").removeClass("shrink"); $(".logo_animated").removeClass("logo_display"); } }); 

 * { margin: 0; padding: 0; } html { width: 100%; height: 100%; } body { width: 100%; height: 100%; } #head-background { width: 100%; background-color: #111; position: fixed; top: 0; left: 0; z-index: 1; } header { width: 1200px; height: 100px; margin: 1em auto; text-align: center; overflow: hidden; transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; } .image { display: inline-block; margin: 0 auto; max-width: 322px; max-height: 100%; padding-top: 5px; } .address-info { float: left; color: #fff; width: 250px; text-align: left; font-size: 1rem; padding-top: 5px; padding-left: 1%; background-color: aqua; } .head-icons { float: right; list-style-type: none; display: block; width: 250px; text-align: right; background-color: aqua; } .head-icons li { display: inline-block; padding-right: 3%; } .head-icons li a { color: #fff; font-size: 2.5rem; } .head-icons li:nth-child(4) { display: block; margin-top: 0.5rem; color: #fff; font-size: 1rem; } .shrink { height: 0; margin-top: 0; margin-bottom: 0; } nav { display: block; width: 100%; background-color: #777; font-size: 0; } nav ul { overflow: hidden; color: #fff; text-align: center; -webkit-transition: max-height 0.4s; -ms-transition: max-height 0.4s; -moz-transition: max-height 0.4s; -o-transition: max-height 0.4s; transition: max-height 0.4s; } nav ul li { display: inline-block; padding: 1rem 2rem; } nav ul li a { color: inherit; text-decoration: none; font-size: 1.5rem; } .fixed { position: fixed; top: 0; left: 0; right: 0; } .burger-button { width: 100%; text-align: right; box-sizing: border-box; padding: 0.5rem; cursor: pointer; color: #fff; font-size: 1.5rem; display: none; } .logo_animated { position: absolute; top: 1rem; margin-left: -20rem; width: 200px; display: inline-block; transition: margin-left 0.5s cubic-bezier(0.5, 0, 0.5, 1.6); } .logo_display { margin-left: 1rem; } #body { height: 2000px; } 

 <div id="head-background"> <header> <h4 class="address-info">00 The Street<br>Bramhope<br>Leeds<br>LS00 000</h4> <img class="image" src="images/PopsiesLogoWhite.png"> <ul class="head-icons"> <li><a href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a></li> <li><a href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li> <li><a href="mailto:popsiesfishandchips@yahoo.co.uk"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li> <li>0113 1234567</li> </ul> </header> <nav> <img class="logo_animated" src="images/popsies.svg"> <div class="burger-button"> <i class="fa fa-bars" aria-hidden="true"></i> </div> <ul id="height"> <li><a href="#welcomeAnchor">Welcome</a></li> <li><a href="#menuAnchor">Menu</a></li> <li><a href="#timesAnchor">Opening Times</a></li> </ul> </nav> </div> <div id="body"></div> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> 

Answer 1

Why not set a time delay? Here's the JS snippet:

setTimeout( function(){ 
         // your function here
}, 300);

set the milliseconds accordingly, I put in 300, change it to what you need.

I went to your demo and tested this and it works. The "if" statement wasn't in the right place:

$(document).on("scroll", function() {
setTimeout(function(){
if ($(document).scrollTop() > 20) {
   $("header").addClass("shrink");
      $(".logo_animated").addClass("logo_display");
     } else {
   $("header").removeClass("shrink");
   $(".logo_animated").removeClass("logo_display");
}} , 900);
});

Answer 2

Like Aaron stated. Uncomment the setTimeout .

Or use a CSS solution. You can delay any transition with this simply property:

transition-delay: 0.9s;

So in your case. Make the following class in your css file like this:

.logo_display {
    margin-left: 1rem;
    transition-delay: 0.9s;
}

 $(document).on("scroll", function() { if ($(document).scrollTop() > 20) { $("header").addClass("shrink"); //setTimeout(function(){ $(".logo_animated").addClass("logo_display"); //}, 900); } else { $("header").removeClass("shrink"); $(".logo_animated").removeClass("logo_display"); } }); 

 * { margin: 0; padding: 0; } html { width: 100%; height: 100%; } body { width: 100%; height: 100%; } /**************************************** ****************HEADER******************* ****************************************/ #head-background { width: 100%; background-color: #111; position: fixed; top: 0; left: 0; z-index: 1; } header { width: 1200px; height: 100px; margin: 1em auto; text-align: center; overflow: hidden; transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; } .image { display: inline-block; margin: 0 auto; max-width: 322px; max-height: 100%; padding-top: 5px; } .address-info { float: left; color: #fff; width: 250px; text-align: left; font-size: 1rem; padding-top: 5px; padding-left: 1%; background-color: aqua; } .head-icons { float: right; list-style-type: none; display: block; width: 250px; text-align: right; background-color: aqua; } .head-icons li { display: inline-block; padding-right: 3%; } .head-icons li a { color: #fff; font-size: 2.5rem; } .head-icons li:nth-child(4) { display: block; margin-top: 0.5rem; color: #fff; font-size: 1rem; } .shrink { height: 0; margin-top: 0; margin-bottom: 0; } /**************************************** **************NAVIGATION***************** ****************************************/ nav { display: block; width: 100%; background-color: #777; font-size: 0; } nav ul { overflow: hidden; color: #fff; text-align: center; -webkit-transition: max-height 0.4s; -ms-transition: max-height 0.4s; -moz-transition: max-height 0.4s; -o-transition: max-height 0.4s; transition: max-height 0.4s; } nav ul li { display: inline-block; padding: 1rem 2rem; } nav ul li a { color: inherit; text-decoration: none; font-size: 1.5rem; } .fixed { position: fixed; top: 0; left: 0; right: 0; } /**************************************** ********STICKY NAVIGATION**************** ****************************************/ .burger-button { width: 100%; text-align: right; box-sizing: border-box; padding: 0.5rem; cursor: pointer; color: #fff; font-size: 1.5rem; display: none; } .logo_animated { position: absolute; top: 1rem; margin-left: -20rem; width: 200px; display: inline-block; transition: margin-left 0.5s cubic-bezier(0.5, 0, 0.5, 1.6); } .logo_display { margin-left: 1rem; transition-delay: 0.9s; } #body{ height: 2000px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="head-background"> <header> <h4 class="address-info">00 The Street<br>Bramhope<br>Leeds<br>LS00 000</h4> <img class="image" src="images/PopsiesLogoWhite.png"> <ul class="head-icons"> <li><a href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a></li> <!-- --> <li><a href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li> <!-- --> <li><a href="mailto:popsiesfishandchips@yahoo.co.uk"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li> <!-- --> <li>0113 1234567</li> </ul> </header> <nav> <img class="logo_animated" src="images/popsies.svg"> <div class="burger-button"> <i class="fa fa-bars" aria-hidden="true"></i> </div> <!-- --> <ul id="height"> <li><a href="#welcomeAnchor">Welcome</a></li> <li><a href="#menuAnchor">Menu</a></li> <li><a href="#timesAnchor">Opening Times</a></li> </ul> </nav> </div> <div id="body"> </div> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> 

Answer 3

You can actually do this without any delays or adding/removing two classes. Using hardcoded delay is actually a bad practice. If you tweak how your CSS is inherited you can do this like so:

Here's the updated codepen and relevant code below:

1. Add .shrink to #head-background element in JS, and apply the rule in css like:

  #head-background.shrink header{ height: 0; margin-top: 0; margin-bottom: 0; } 

2. Decleare your .logo_animated class like so:

 #head-background.shrink .logo_animated {//apply this rule only when #head-background has .shrink class too. margin-left: 1rem; transition: margin-left .8s cubic-bezier(0.5, 0, 0.5, 1.6); } 

Your JavaScript will now only look like:

$(document).on("scroll", function() {
  if ($(document).scrollTop() > 20) {
    $("#head-background").addClass("shrink");
  } else {
    $("#head-background").removeClass("shrink");
  }

});

Notice how you don't need to add/remove .logo_display class separately, its now achieved by css inheritance.

Here's how this works:

You apply shrink class to the parent of both head and .logo_animated . Then you setup a selector #head-background.shrink .logo_animated which tells the browser to only apply rule after the .shrink class has been applied to the parent. Which essentially gives you the desired effect. Remember you still have to tweak the animation time properly. In codepen example I used .8s for .logo_animated . You can further refine your animation now to make it look smoother, I basically left it at what you had