2016-10-11 5 views
0

スプラッシュページからホームにフェードアウトアニメーションを実行するには、ウィンドウがオフになっている必要があります。 しかし、家で私はウィンドウが必要です。スクロールでクラスを追加するには、ヘッダーを変更するために使用します。 このコードは動作しません。解決策を見つけたためにjQueryスクロールウィンドウをオフにした後に戻るウィンドウを

$(window).ready(function(){ 
    $(this).one('scroll', function() { 
     $(window).off("scroll"); 
     $(".splash").slideUp("800", function() { 
      $("html, body").animate({"scrollTop":"0px"},100); 
      $(".site").delay(100).animate({"opacity":"1.0"},800); 
      $("html, body").on("scroll") 
     }); 
    }); 
}); 

は私を助けることができますか?ありがとう!

これは私がクラスの追加に使用するコードです必要がある場合:

$(document).ready(function($) { 
    $(window).scroll(function() { 
     var sT = $(this).scrollTop(); 
     if (sT >= 200) { 
      $('header').addClass('scroll-header') 
     } else { 
      $('header').removeClass('scroll-header') 
     } 
    }); 
}); 

HTML:

<body <?php body_class(); ?>> 
<div class="show_splash"> 
    <div class="splash fade-in"> 
     <?php 
      $post_id = 93; 
      $queried_post = get_post($post_id); 
      echo $queried_post->post_content; 
     ?> 

    </div> 
</div> 
<div id="page" class="site"> 
    <header id="masthead" class="site-header cf" role="banner"> 

はCSS:最後に

.cf:before, 
.cf:after { 
    content: " "; 
    /* 1 */ 
    display: table; 
    /* 2 */ } 

.cf:after { 
    clear: both; } 

.cf { 
    *zoom: 1; } 

.bk_splash{ 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    margin: auto; 
} 
+0

あなたのhtmlとcssを含めてください。 –

+0

@ Ron.Bascoさらに私に知らせる必要がある場合は、htmlとcssを追加しました。私を助けることができれば、私は非常に感謝します! –

+0

'$(" html、body ")。on(" scroll ")'はスクロールイベントを処理する関数がありません。 – Cobote

答えて

0

私は使用しないようにしようしていますスクロールオフして簡単に変更する

.show_splash{position: fixed;} 

このように細かく作業!

関連する問題