特定のセクションにある場合はCSSを適用してください

Question

ユーザーが特定のセクションにある場合はcssを追加しようとしていますが、実現できません。 cssは、この（それは私の棒をアニメーション化）である：

$(function(){ 
    $(window).bind('scroll', function() { 
     $('#skill-section').each(function() { 
      var post = $(this); 
      var position = post.position().top - $(window).scrollTop(); 

      if (position <= 0) { 
       post.addClass('stye', ''); // I tried to add the css here, but it didn't work 
      } 
      } 
     });   
    }); 
}); 

私はそれらの青いバーが左から行きたい：

.swift  { width:70%; -moz-animation:swift 2s ease-out;  -webkit-animation:swift 2s ease-out;  } 
.java  { width:50%; -moz-animation:java 2s ease-out;  -webkit-animation:java 2s ease-out;  } 
.python  { width:60%; -moz-animation:python 2s ease-out;  -webkit-animation:python 2s ease-out;  } 
.backend { width:30%; -moz-animation:backend 2s ease-out; -webkit-animation:backend 2s ease-out; } 
.html5 { width:55%; -moz-animation:html5 2s ease-out; -webkit-animation:html5 2s ease-out; } 
.css3 { width:55%; -moz-animation:css3 2s ease-out; -webkit-animation:css3 2s ease-out; } 
@-moz-keyframes swift  { 0% { width:0px;} } 
@-moz-keyframes java  { 0% { width:0px;} } 
@-moz-keyframes python  { 0% { width:0px;} } 
@-moz-keyframes backend { 0% { width:0px;} } 
@-moz-keyframes html5 { 0% { width:0px;} } 
@-moz-keyframes css3 { 0% { width:0px;} } 

@-webkit-keyframes swift  { 0% { width:0px;} } 
@-webkit-keyframes java  { 0% { width:0px;} } 
@-webkit-keyframes python  { 0% { width:0px;} } 
@-webkit-keyframes backend { 0% { width:0px;} } 
@-webkit-keyframes html5 { 0% { width:0px;} } 
@-webkit-keyframes css3 { 0% { width:0px;} } 

そして、これは方法ですが、私は、ユーザーが特定のセクションにあるかどうかを検出しますユーザーが特定のセクションにある場合にのみ、右に移動します。今はページの読み込み時にそれを行い、ユーザはそれを見ないかもしれないからです。

Answer 1

あなたは、スクリプトの末尾に余分な});を持っており、最後にeach()方法について)を逃します。また、idにeachを使用することはできません。代わりにクラスを使用する必要があります.IDは一意でなければなりません。以下の作業スニペットを参照してください。

$(function() { 
 
    $(window).bind('scroll', function() { 
 
     $('.skill-section').each(function() { //added class instead of id 
 
      var post = $(this); 
 
      var position = post.position().top - $(window).scrollTop(); 
 

 
      if (position <= 0) { 
 
      
 
      post.addClass('stye'); 
 
      } 
 
     });// added the missing ")" here 
 
     }); 
 
    }); 
 
//removed the extra "});" from here

.swift  { width:70%; -moz-animation:swift 2s ease-out;  -webkit-animation:swift 2s ease-out;  } 
 
.java  { width:50%; -moz-animation:java 2s ease-out;  -webkit-animation:java 2s ease-out;  } 
 
.python  { width:60%; -moz-animation:python 2s ease-out;  -webkit-animation:python 2s ease-out;  } 
 
.backend { width:30%; -moz-animation:backend 2s ease-out; -webkit-animation:backend 2s ease-out; } 
 
.html5 { width:55%; -moz-animation:html5 2s ease-out; -webkit-animation:html5 2s ease-out; } 
 
.css3 { width:55%; -moz-animation:css3 2s ease-out; -webkit-animation:css3 2s ease-out; } 
 
@-moz-keyframes swift  { 0% { width:0px;} } 
 
@-moz-keyframes java  { 0% { width:0px;} } 
 
@-moz-keyframes python  { 0% { width:0px;} } 
 
@-moz-keyframes backend { 0% { width:0px;} } 
 
@-moz-keyframes html5 { 0% { width:0px;} } 
 
@-moz-keyframes css3 { 0% { width:0px;} } 
 

 
@-webkit-keyframes swift  { 0% { width:0px;} } 
 
@-webkit-keyframes java  { 0% { width:0px;} } 
 
@-webkit-keyframes python  { 0% { width:0px;} } 
 
@-webkit-keyframes backend { 0% { width:0px;} } 
 
@-webkit-keyframes html5 { 0% { width:0px;} } 
 
@-webkit-keyframes css3 { 0% { width:0px;} } 
 

 
.skill-section{ 
 
    background: #adadad; 
 
    width: 100px; 
 
    height: 600px; 
 
} 
 
.stye{ 
 
    background: #F00; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='skill-section'></div> 
 
<div class='skill-section'></div> 
 
<div class='skill-section'></div>