要素上でスクロールのアニメーションが機能しない

Question

スクロールでセクション1をアニメーション化しようとしています。しかし、うまく動作する別の要素ですでにこのスクロールコードを使用しているので、私を混乱させるようにはうまくいかないようです。ただし、その要素は画面から開始しません。

ここに私のコードです。

$(window).scroll(function(){ 
 
//section1 
 
    var scrollPos = $(window).scrollTop(); 
 

 
    if((scrollPos > 150) && (scrollState === 'top')) { 
 
     $("#section1").animate({left: '60'}, 700); 
 
     scrollState = 'scrolled'; 
 
    }  
 
});

#section1 { 
 
\t text-align: center; 
 
\t margin-top: 3em; 
 
\t margin-bottom: 3em; 
 
\t font-size: 1em; 
 
\t height: auto; 
 
\t font-family: 'Open Sans', sans-serif; 
 
\t position: relative; 
 
\t left: -60em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="section1" class="container"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-md-6 col-md-offset-3"> 
 
\t \t \t \t <p>blablablablablablablabla </p> \t 
 
\t \t \t </div> 
 
\t \t </div> \t \t \t 
 
\t </div>

Answer 1

私は正確に何をしたい理解していないが、あなたはスクロールバーなしでコンテナを使用するか、またはちょうどあなたがたときに、ユーザーのスクロールを検出したい場合は、検出したときに、スクロール用DOMMouseScrollを使用することができます。これはうまく動作します。以下試してください：

$('html').on ('DOMMouseScroll', function (e) { 
 
    if(e.originalEvent.detail < 0) { 
 
     $("#section1").animate({left: '-60em'}, 700); 
 
    } else { 
 
     $("#section1").animate({left: '60'}, 700); 
 
    } 
 
});

#section1 { 
 
\t text-align: center; 
 
\t margin-top: 3em; 
 
\t margin-bottom: 3em; 
 
\t font-size: 1em; 
 
\t height: auto; 
 
\t font-family: 'Open Sans', sans-serif; 
 
\t position: relative; 
 
\t left: -60em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="section1" class="container"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-md-6 col-md-offset-3"> 
 
\t \t \t \t <p>blablablablablablablabla </p> \t 
 
\t \t \t </div> 
 
\t \t </div> \t \t \t 
 
\t </div>

UPDATE

あなたは同じものを作る2つのwindow.scroll機能を持っています。

var main = function() { 

    var scrollState = 'top'; 
    //rowheader 
    $(window).scroll(function(){ 

     var scrollPos = $(window).scrollTop(); 

     if((scrollPos > 150) && (scrollState === 'top')) { 
      $("#rowheader h1").animate({left: '-20em'}, 700); 
      $("#section1").animate({left: '60'}, 700); 
      scrollState = 'scrolled'; 
     }  
     else if((scrollPos <= 150) && (scrollState === 'scrolled')) { 
      $("#rowheader h1").animate({left: '0'}, 500); 
      scrollState = 'top'; 
     } 
    }); 

}; 

$(document).ready(main); 

Answer 2

最初に、150px後にセクションをスクロールして表示している可能性があります。この場合は、固定位置を使用するか、最上部の距離を定義する必要があります。

第2に、CSSを使用してjQueryやjavascriptではなく要素の表示を定義することをお勧めします。

セクションエレメントの固定位置のデモをご覧ください。 https://jsfiddle.net/cazdt0gj/

クラスを追加することで、コードの「スクロール」された部分についても心配する必要はありません。

$("#section1").addClass('active')