fadeIn（）は動作しませんが、fadeOut（）は正常です

私はscrollToTopにfadeIn（）とfadeOut（）を追加したいが、fadeInは動作していない。fadeIn（）は動作しませんが、fadeOut（）は正常です

ご覧otの場合、私はいくつかのGIF作成しました：あなたがフェードインを（見ることができるようにFirst GIF Here

）をscrollToTopボタンには、ウィンドウのスクロールによってトリガ、

です

これは私のコードです：

$(document).ready(function() { 
    //Check to see if the window is top if not then display button 
    $('.modal-content').scroll(function() { 
    if ($(this).scrollTop() > 100) { 
     $(".scrollToTop").fadeIn(1000); 
    } else { 
     $('.scrollToTop').fadeOut(1000); 
    } 
    }); 

    //Click event to scroll to top 
    $('.scrollToTop').click(function() { 
    $('.modal-content').animate({ 
     scrollTop: 0 
    }, 500); 
    return false; 
    }); 

});

<a id="up" class="scrollToTop" style="display:none;"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>

出典

2016-06-15 Jerem

を "[MCVE]" のガイダンスをご確認ください。最小限のレプロであれば、より簡単で楽しいことができます。（これはまた、 "gyazo.com"のようなドメインからのgifを余計にする） – Jeroen

私はjQueryの専門家ではありませんが、ページがスクロールされるたびにfadeInを呼び出しているように問題があるかのように見えます。私がお勧めするのは、buttonShowing（または何でも）というブール値を作成し、それをfalseに設定することです。

次に、ユーザーがスクロールするたびに適切なifおよびelseステートメントの最後にbuttonShowingを変更します。その後、if/elseステートメントの先頭で、buttonShowingの状態が変更されたかどうかを確認し、最後のスクロールイベントが発生してから状態が変更されている場合はfadeIn/Outのみを確認できます。あなたのための

$(document).ready(function() { 
    var buttonShowing = false; 
    //Check to see if the window is top if not then display button 
    $('.modal-content').scroll(function() { 
    if ($(this).scrollTop() > 100) { 
     if(!buttonShowing) $(".scrollToTop").fadeIn(1000); 
     buttonShowing = true; 
    } else { 
     if(buttonShowing) $('.scrollToTop').fadeOut(1000); 
     buttonShowing = false; 
    } 
    }); 

    //Click event to scroll to top 
    $('.scrollToTop').click(function() { 
    $('.modal-content').animate({ 
     scrollTop: 0 
    }, 500); 
    return false; 
    }); 

});

出典

2016-06-15 11:28:13 Tobsta

あなた自身のboolを格納するのではなく、 '.is（ '：animated'）'を使うことができます。効率的ではないかもしれませんが、とにかくオンスクロールハンドラをデバッグする必要があります。 http://stackoverflow.com/a/725282/2181514 –

@ freedomn-m Cool。私が言ったように、jQueryのエキスパートではありません:-) – Tobsta

最適なソリューション：$(window).scroll(function() {から

$(window).scroll(function() { 
    var scroll_pos = window.pageYOffset; 
    var scroll_div = $('.modal-content').offset().top; 

    if(scroll_pos > scroll_div) { 
     if ($(this).scrollTop() > 100) 
      $(".scrollToTop").fadeIn(1000); 
     else 
      $('.scrollToTop').fadeOut(1000); 
    } 
});

または変更$('.modal-content').scroll(function() {ここでは、コードです。参照：

$(document).ready(function() { 
    //Check to see if the window is top if not then display button 
    $(window).scroll(function() { 
     if ($(this).scrollTop() > 100) { 
      $(".scrollToTop").fadeIn(1000); 
      } else { 
      $('.scrollToTop').fadeOut(1000); 
     } 
    }); 

    //Click event to scroll to top 
    $('.scrollToTop').click(function() { 
     $('.modal-content').animate({ 
      scrollTop: 0 
     }, 500); 
     return false; 
    }); 

});

出典

2016-06-15 11:28:45

私はあなたの答えを試みましたが動作しません、私はモーダルで働くので、 "$（ウィンドウ）.scroll（function（）{" 。私のページのすべてのコードを表示したい場合（モーダルで、私はそれを使ってアンカーを作成します） – Jerem

@Jerem： 'あなたのためのベストソリューション 'を使用してください。スクロールdivで希望どおりに作業します。 –

この例が参考になります。：

<html> 
    <head> 
     <style> 
      body { 
       height: 1200px; 
      } 
      div { 
       width: 50px; 
       height: 50px; 
       background-color: red; 
       border-radius: 100%; 
       position: fixed; 
       display: none; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="cir"></div> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
     <script> 
      $(window).scroll(function(){ 
       if($(document).scrollTop()>100) 
        $("#cir").fadeIn(1000); 
       else 
        $("#cir").fadeOut(800); 
      }) 
     </script> 
    </body> 
</html>

出典

2016-06-15 11:32:11 Ehsan

$（ウィンドウ）.scroll（関数（）とのソリューションは、このスクリプトはモーダルで使用されている確かにbeacause、動作しません

これは、モーダルと私のHTMLコードのです。：

<!-- Modal Structure --> 
 
<div id="modal1" class="modal modal-fixed-footer"> 
 
    <div class="modal-content"> 
 
     <!-- My content --> 
 
     <h4>Ajouter une recette</h4> 
 
     <div class="row"> 
 
      <div class="input-field col s6 offset-s3"> 
 
       <input id="libelle" type="text" class="validate"> 
 
       <label for="libelle">Nom de la recette</label> 
 
      </div>    
 
     </div> 
 
     <form id="form_ingredient"> 
 
      <div class="row"> 
 
       <div class="col s4 offset-s1 input-field"> 
 
        <input id="ingredient" name="ingredient" type="text" class="validate"> 
 
        <label for="ingredient">Ingredient</label> 
 
       </div> 
 
       <div class="col s4 offset-s2 input-field"> 
 
        <input id="poid" name="poid" type="number" class="validate"> 
 
        <label for="poid">Poid</label> 
 
       </div> 
 
      </div> 
 
      
 
     </form> 
 
    </div> 
 
    <div class="modal-footer" style="text-align: right;"> 
 
     <!-- My footer --> 
 
     <a id="up" class="scrollToTop" style="display:none;"><i class="fa fa-arrow-up" aria-hidden="true"></i></a> 
 
     <a id="add_ing"><i class="fa fa-plus" aria-hidden="true"></i></a> 
 
     <a id="valid_ing" style="margin-left: 1.5%;"><i class="fa fa-check" aria-hidden="true"></i></a> 
 
    </div> 
 
</div> 
 

 
<script> 
 
//The script that I try to use 
 
</script>

出典

2016-06-15 12:31:19 Jerem

私はCSSで私の問題を解決し、私はちょうど私のスタイルシートにこれらのクラスを追加します。

.scrollToTop{ 
opacity:0; 
text-decoration: none; 
transition:opacity 1s ease-in; 
float: left; } 

.scrollToTop.visible { 
opacity:1; }

そしてこのJsと、それは動作します：

$('.modal-content').scroll(function(){ 

     if ($(this).scrollTop() > 100) { 

       $(".scrollToTop").addClass('visible').css("cursor", "pointer"); 
     } else { 
       $('.scrollToTop').removeClass('visible').css("cursor", "default"); 
     } 
});

出典

2016-06-15 13:23:36 Jerem

fadeIn（）は動作しませんが、fadeOut（）は正常です

答えて

関連する問題