2015-06-01 10 views
5

Si tenta di aggiungere effetto di transizione scorrevole quando si aggiunge e si rimuove la classe. provato a questa nav appiccicoso js di seguito:Applicare l'effetto Transizione quando si aggiunge e si rimuove la classe

lastScroll = 0; 
$(window).on('scroll',function() {  
    var scroll = $(window).scrollTop(); 
    if(scroll === 0){ 
     $(".nav").removeClass("darkHeader"); 
    } else if(lastScroll - scroll > 0) { 
     $(".nav").addClass("darkHeader"); 
    } else { 
     $(".nav").removeClass("darkHeader"); 
    } 
    lastScroll = scroll; 
}); 

mio Prova:

lastScroll = 0; 
$(window).on('scroll',function() {  
    var scroll = $(window).scrollTop(); 
    if(scroll === 0){ 
     $(".nav").removeClass("darkHeader", 1000, "easeInOutQuad"); 
    } else if(lastScroll - scroll > 0) { 
     $(".nav").addClass("darkHeader", 1000, "easeInOutQuad"); 
    } else { 
     $(".nav").removeClass("darkHeader", 1000, "easeInOutQuad"); 
    } 
    lastScroll = scroll; 
}); 

sto provando questo con l'aggiunta 1000, "easeInOutQuad", cercando di fare questo da jquery senza CSS3 (No CSS per favore).
Problema Fiddle >>

Sto cercando di implementare effetto slide Ti piace this >>

+0

removeClass non prende alcun argomento, oltre un nome di classe o di una funzione, e dal momento che non volete usare css3 transitons dovresti usare [animate] (http://api.jquery.com/animate) –

+0

Grazie, ma come? – Aariba

+0

@Aabira Quale proprietà 'css' sarebbe' 1000, 'easeInOutQuad "' essere applicata a? – guest271314

risposta

2

Prova utilizzando jQuery UI, .animate(), .stop(); aggiungendo .css("top", 0) prima di aggiungere .darkHeaderclass, aggiungendo color: wheat a .darkHeadercss

$(function() { 
 

 
    lastScroll = 0; 
 

 
    function _scroller() { 
 
    var scroll = $(window).scrollTop(); 
 
    if (scroll < 10) { 
 
     $(".nav").stop() 
 
     .animate({ 
 
      backgroundColor: "rgb(250, 227, 183)" 
 
     }, { 
 
      duration: 1000, 
 
      easing: "easeInOutQuad" 
 
     }) 
 
     .removeClass("darkHeader"); 
 
    } else if (lastScroll - scroll > 10) { 
 

 
     if (!$(".nav").is(":animated")) { 
 
     $(this).off("scroll"); 
 
     $(".nav").stop() 
 
      .css("top", -24) 
 
      .animate({ 
 
      top: 0, 
 
      backgroundColor: "rgb(0, 0, 0)" 
 
      }, { 
 
      duration: 1000, 
 
      easing: "easeInOutQuad", 
 
      complete: function() { 
 
       $(window).on("scroll.t", function() { 
 
       if ($(window).scrollTop() < 1) { 
 
        $(this).off("scroll.t") 
 
        .on("scroll", _scroller).scroll() 
 
       } 
 
       }) 
 
      } 
 
      }) 
 
      .addClass("darkHeader"); 
 
     } 
 
    } else { 
 
     $(".nav").stop() 
 
     .animate({ 
 
      backgroundColor: "rgb(243, 221, 180)" 
 
     }, { 
 
      duration: 1000, 
 
      easing: "easeInOutQuad" 
 
     }) 
 
     .removeClass("darkHeader"); 
 
    } 
 
    lastScroll = scroll; 
 
    } 
 
    $(window).on('scroll', _scroller) 
 

 
});
body { 
 
    font-family: "Rokkitt", Helvetica, Arial, sans-serif; 
 
    font-size: 18px; 
 
    line-height: 20px; 
 
    background: #f8f8f0; 
 
    margin: 0; 
 
} 
 
.darkHeader { 
 
    /*background-color: black !important; */ 
 
    position: fixed; 
 
    color: wheat; 
 
} 
 
.nav { 
 
    width: 100%; 
 
    background-color: wheat; 
 
    padding: 10px; 
 
} 
 
.menu { 
 
    float: right; 
 
    cursor: pointer; 
 
    margin-top: -8px; 
 
} 
 
#content { 
 
    margin-top: 150px; 
 
    padding-top: 20px; 
 
} 
 
.wrap { 
 
    max-width: 800px; 
 
    margin: 0 auto; 
 
    padding: 0 40px; 
 
} 
 
#top span { 
 
    white-space: nowrap; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
 
<div class="nav">Sticky top navigation bar</div> 
 
<div class="wrap"> 
 

 
    <h3>Some filler text</h3> 
 
    Bacon ipsum dolor sit amet mollit ball tip occaecat brisket cupidatat meatball capicola. Capicola rump turducken, elit shankle cupidatat pastrami duis fatback. Sint occaecat kielbasa labore pastrami corned beef. Sunt swine bacon, fugiat dolor aute anim 
 
    jerky nostrud et venison shankle consectetur boudin landjaeger. Pork chop sed turkey aute, duis corned beef pariatur short loin proident culpa. Capicola filet mignon fugiat corned beef shank ea, commodo doner adipisicing eu salami. Doner laboris pariatur 
 
    beef ribs non id. Andouille eu meatball consectetur ham hock. Ea dolore cillum cow pork loin aliquip leberkas id est corned beef dolore t-bone. In salami jerky cupidatat et. Ham hock irure reprehenderit chicken drumstick sausage ad, pig elit salami. 
 
    Tri-tip consectetur t-bone salami, sunt jerky exercitation ham ut tempor nostrud enim. Beef ribs enim esse do non sausage. Chuck anim spare ribs ut ad deserunt, tri-tip chicken bacon tongue ball tip. Est tongue doner eiusmod veniam sint tenderloin deserunt 
 
    bresaola strip steak fugiat proident pastrami. 
 
    <p>Mollit turkey pork chop, drumstick tongue shank pastrami tempor. Reprehenderit consequat excepteur, in eiusmod ut incididunt short loin adipisicing tenderloin capicola fugiat. Ut non short ribs ball tip. Elit beef non flank reprehenderit hamburger. 
 
    Fatback drumstick pancetta magna shankle corned beef pastrami spare ribs. Quis dolore beef non, veniam aliqua sirloin consectetur laboris shoulder pork leberkas short loin. Rump qui beef spare ribs drumstick andouille duis est esse irure strip steak 
 
    labore. 
 
    </p> 
 
    <p>Tongue filet mignon pancetta, elit pariatur nostrud deserunt excepteur tri-tip salami in nisi. Ball tip beef fugiat, mollit officia jerky sirloin chuck dolore. Sausage fugiat spare ribs, tongue pork belly ut in. T-bone fatback anim nisi minim culpa 
 
    laboris andouille meatball ham ut.</p> 
 
    <p>Et turducken pork loin strip steak tempor enim nostrud magna minim qui adipisicing. Pork nulla mollit dolore. Nisi reprehenderit shank, hamburger jerky magna drumstick pancetta duis t-bone tempor cow proident ut. Andouille sed beef ribs tail chuck deserunt 
 
    mollit beef adipisicing ribeye landjaeger. Shankle pig cillum aliquip, exercitation t-bone ground round prosciutto mollit chuck kevin brisket dolore ullamco. Pork chop capicola culpa doner nostrud filet mignon pork loin voluptate qui ut in aliquip 
 
    pork belly.</p> 
 
    <p>Deserunt pancetta pork loin cillum cupidatat laborum pork belly jerky short ribs prosciutto leberkas mollit non tail duis. Laborum in pork chop, venison filet mignon voluptate tail reprehenderit pig shankle rump deserunt in cupidatat. Landjaeger pork 
 
    chop incididunt, irure occaecat mollit elit tenderloin excepteur anim kevin frankfurter tongue corned beef. Id pork chop magna et non velit. Boudin hamburger dolore eu ut culpa. In ut deserunt incididunt meatball ribeye, shoulder aute. Cillum labore 
 
    occaecat salami quis laborum. Ex nulla pancetta ham hock tongue, andouille aute laborum velit strip steak beef ribs. Id corned beef excepteur filet mignon drumstick est magna consequat veniam enim exercitation sunt venison strip steak biltong. Cillum 
 
    pancetta id quis biltong capicola corned beef. Boudin tongue in pariatur proident ut pork belly magna nulla swine.</p> 
 
    <p>Ad aliquip officia, aute chuck qui veniam swine pancetta t-bone ribeye doner. Culpa velit eiusmod, ball tip nisi consectetur nostrud et sausage bresaola eu dolore. Turducken dolore irure commodo pork chop meatball duis short ribs, t-bone boudin bacon. 
 
    Aliquip ad tri-tip swine eiusmod. Rump chicken kevin eu. Voluptate biltong commodo, hamburger esse non tempor sausage cillum eiusmod ribeye sunt shankle. Meatloaf short ribs voluptate brisket, pork belly bresaola ullamco chuck ball tip incididunt 
 
    irure eu consequat hamburger leberkas. Meatball occaecat filet mignon, jowl kielbasa exercitation reprehenderit bresaola venison. Incididunt salami ham quis prosciutto pork loin cow irure labore venison sausage corned beef chicken. Laboris jowl strip 
 
    steak quis spare ribs. In hamburger et ea bresaola turkey.</p> 
 
    <p>Bacon ipsum dolor sit amet mollit ball tip occaecat brisket cupidatat meatball capicola. Capicola rump turducken, elit shankle cupidatat pastrami duis fatback. Sint occaecat kielbasa labore pastrami corned beef. Sunt swine bacon, fugiat dolor aute anim 
 
    jerky nostrud et venison shankle consectetur boudin landjaeger. Pork chop sed turkey aute, duis corned beef pariatur short loin proident culpa. Capicola filet mignon fugiat corned beef shank ea, commodo doner adipisicing eu salami. Doner laboris pariatur 
 
    beef ribs non id. Andouille eu meatball consectetur ham hock. Ea dolore cillum cow pork loin aliquip leberkas id est corned beef dolore t-bone. In salami jerky cupidatat et.</p>Ham hock irure reprehenderit chicken drumstick sausage ad, pig elit salami. 
 
    Tri-tip consectetur t-bone salami, sunt jerky exercitation ham ut tempor nostrud enim. Beef ribs enim esse do non sausage. Chuck anim spare ribs ut ad deserunt, tri-tip chicken bacon tongue ball tip. Est tongue doner eiusmod veniam sint tenderloin deserunt 
 
    bresaola strip steak fugiat proident pastrami. Mollit turkey pork chop, drumstick tongue shank pastrami tempor. Reprehenderit consequat excepteur, in eiusmod ut incididunt short loin adipisicing tenderloin capicola fugiat. Ut non short ribs ball tip. 
 
    Elit beef non flank reprehenderit hamburger. Fatback drumstick pancetta magna shankle corned beef pastrami spare ribs. Quis dolore beef non, veniam aliqua sirloin consectetur laboris shoulder pork leberkas short loin. Rump qui beef spare ribs drumstick 
 
    andouille duis est esse irure strip steak labore. 
 
    <p>Tongue filet mignon pancetta, elit pariatur nostrud deserunt excepteur tri-tip salami in nisi. Ball tip beef fugiat, mollit officia jerky sirloin chuck dolore. Sausage fugiat spare ribs, tongue pork belly ut in. T-bone fatback anim nisi minim culpa 
 
    laboris andouille meatball ham ut. Et turducken pork loin strip steak tempor enim nostrud magna minim qui adipisicing. Pork nulla mollit dolore. Nisi reprehenderit shank, hamburger jerky magna drumstick pancetta duis t-bone tempor cow proident ut. 
 
    Andouille sed beef ribs tail chuck deserunt mollit beef adipisicing ribeye landjaeger. Shankle pig cillum aliquip, exercitation t-bone ground round prosciutto mollit chuck kevin brisket dolore ullamco. Pork chop capicola culpa doner nostrud filet 
 
    mignon pork loin voluptate qui ut in aliquip pork belly.</p>Deserunt pancetta pork loin cillum cupidatat laborum pork belly jerky short ribs prosciutto leberkas mollit non tail duis. Laborum in pork chop, venison filet mignon voluptate tail reprehenderit 
 
    pig shankle rump deserunt in cupidatat. Landjaeger pork chop incididunt, irure occaecat mollit elit tenderloin excepteur anim kevin frankfurter tongue corned beef. Id pork chop magna et non velit. Boudin hamburger dolore eu ut culpa. In ut deserunt 
 
    incididunt meatball ribeye, shoulder aute. Cillum labore occaecat salami quis laborum. Ex nulla pancetta ham hock tongue, andouille aute laborum velit strip steak beef ribs. Id corned beef excepteur filet mignon drumstick est magna consequat veniam 
 
    enim exercitation sunt venison strip steak biltong. Cillum pancetta id quis biltong capicola corned beef. Boudin tongue in pariatur proident ut pork belly magna nulla swine. Ad aliquip officia, aute chuck qui veniam swine pancetta t-bone ribeye doner. 
 
    Culpa velit eiusmod, ball tip nisi consectetur nostrud et sausage bresaola eu dolore. Turducken dolore irure commodo pork chop meatball duis short ribs, t-bone boudin bacon. Aliquip ad tri-tip swine eiusmod. Rump chicken kevin eu. Voluptate biltong 
 
    commodo, hamburger esse non tempor sausage cillum eiusmod ribeye sunt shankle. Meatloaf short ribs voluptate brisket, pork belly bresaola ullamco chuck ball tip incididunt irure eu consequat hamburger leberkas. Meatball occaecat filet mignon, jowl kielbasa 
 
    exercitation reprehenderit bresaola venison. Incididunt salami ham quis prosciutto pork loin cow irure labore venison sausage corned beef chicken. Laboris jowl strip steak quis spare ribs. In hamburger et ea bresaola turkey. Bacon ipsum dolor sit amet 
 
    mollit ball tip occaecat brisket cupidatat meatball capicola. Capicola rump turducken, elit shankle cupidatat pastrami duis fatback. Sint occaecat kielbasa labore pastrami corned beef. Sunt swine bacon, fugiat dolor aute anim jerky nostrud et venison 
 
    shankle consectetur boudin landjaeger. Pork chop sed turkey aute, duis corned beef pariatur short loin proident culpa. Capicola filet mignon fugiat corned beef shank ea, commodo doner adipisicing eu salami. Doner laboris pariatur beef ribs non id. Andouille 
 
    eu meatball consectetur ham hock. Ea dolore cillum cow pork loin aliquip leberkas id est corned beef dolore t-bone. In salami jerky cupidatat et. Ham hock irure reprehenderit chicken drumstick sausage ad, pig elit salami. Tri-tip consectetur t-bone 
 
    salami, sunt jerky exercitation ham ut tempor nostrud enim. Beef ribs enim esse do non sausage. Chuck anim spare ribs ut ad deserunt, tri-tip chicken bacon tongue ball tip. Est tongue doner eiusmod veniam sint tenderloin deserunt bresaola strip steak 
 
    fugiat proident pastrami. 
 
    <p>Mollit turkey pork chop, drumstick tongue shank pastrami tempor. Reprehenderit consequat excepteur, in eiusmod ut incididunt short loin adipisicing tenderloin capicola fugiat. Ut non short ribs ball tip. Elit beef non flank reprehenderit hamburger. 
 
    Fatback drumstick pancetta magna shankle corned beef pastrami spare ribs. Quis dolore beef non, veniam aliqua sirloin consectetur laboris shoulder pork leberkas short loin. Rump qui beef spare ribs drumstick andouille duis est esse irure strip steak 
 
    labore. 
 
    </p>Tongue filet mignon pancetta, elit pariatur nostrud deserunt excepteur tri-tip salami in nisi. Ball tip beef fugiat, mollit officia jerky sirloin chuck dolore. Sausage fugiat spare ribs, tongue pork belly ut in. T-bone fatback anim nisi minim culpa 
 
    laboris andouille meatball ham ut. 
 
    <p>Et turducken pork loin strip steak tempor enim nostrud magna minim qui adipisicing. Pork nulla mollit dolore. Nisi reprehenderit shank, hamburger jerky magna drumstick pancetta duis t-bone tempor cow proident ut. Andouille sed beef ribs tail chuck deserunt 
 
    mollit beef adipisicing ribeye landjaeger. Shankle pig cillum aliquip, exercitation t-bone ground round prosciutto mollit chuck kevin brisket dolore ullamco. Pork chop capicola culpa doner nostrud filet mignon pork loin voluptate qui ut in aliquip 
 
    pork belly.</p> 
 
</div>

jsfiddle http://jsfiddle.net/9fbr320y/9/

+0

Grazie, ma è solo effetto dissolvenza, sto cercando di far scorrere l'effetto in questo modo: http://www.jqueryscript.net/demo/jQuery-Plugin-To-Hide-Sticky-Navbar-When-Scrolling-Down-Scroll -Up-Menu/ – Aariba

+0

@Aabira Vedi post aggiornato. – guest271314

+0

Bello, ma il problema è che se faccio scorrere verso l'alto, allora mostra scorrevole, ma poi non si nasconde quando Scorri di nuovo verso il basso. – Aariba

Problemi correlati