Question

如果用户在某个部分，我正在尝试添加css，但是我无法实现它。 css就是这个（它会激活我的酒吧）：

.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;} }

这就是方法，我检测用户是否在某个部分：

 $(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
            }
            }
        });        
    });
});

我希望那些蓝条只有在用户处于特定区域时才能从左向右移动。因为现在它在页面加载时执行，用户可能看不到它。

Answer 1

脚本末尾有一个额外的});，但最后错过)方法的each()。此外，您无法在each上使用id，您应该使用类，而ID必须是唯一的。请参阅下面的工作代码：

＆＃13;

$(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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

如果在某些部分应用css

1 个答案: