Question

我想在达到id“section-2”时更改class =“Name1”的CSS类。如果达到id“section-3”，还要更改class =“Name2”的CSS。

此代码仅适用于一个部分。

CSS

.Name1 {
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    transition: all 2s linear;
}
.Name2 {
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    transition: all 2s linear;
}
.rotate {
     -moz-transform:rotate(360deg);
     -webkit-transform:rotate(360deg);
     transform:rotate(360deg);
}

JS

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop(); 
    $('.Name1').toggleClass('rotate',
        scroll >= $('#section-2').offset().top
    ); 
}); 
$(window).scroll();

HTML

<ol class="curtains"> 
  <li id="section-1" class="cover" ">
    <section class="center-block">
      <div class="wrapper clearfix">
        <div class="col1-1 centered">

        </div>
      </div>
    </section>
  </li> 
  <li id="section-2" class="cover" style="background-color:#e74c3c">
    <section class="center-block">
      <div class="wrapper clearfix">
        <div class="col1-2"> 
            <h4 class="Name1">Name1</h4>
        </div>  
      </div>
    </section>
  </li> 
  <li id="section-3" class="cover" style="background-color:#16a085">
    <section class="center-block">
      <div class="wrapper clearfix">  
        <div class="col1-2"> 
            <h4 class="Name2">Name 2</h4>
          </div>
      </div>
    </section>
  </li>
</ol>

如果我想测试两个部分，则不能使用此代码。

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop(); 
    $('.Name1').toggleClass('rotate', 
        scroll >= $('#section-2').offset().top
    ); 
    $('.Name2').toggleClass('rotate', 
        scroll >= $('#section-3').offset().top
    ); 
}); 
$(window).scroll();

Answer 1

我修改了您的代码，以便在标题从页面底部进入视口时发生旋转效果。

这是«在滚动期间到达id =“Name2”时所理解的

我使用了.addClass和.removeClass以及基于文档滚动减去视口高度的条件。

因为在滚动事件中直接使用.toggleClass时... 它通过一个非常小的鼠标滚轮旋转来打开/关闭类10次......并导致动画奇怪或根本不工作。

它还可以防止动画在阅读时始终出现。

    //$(document).on("scroll", function(){console.log("document scroll!");});
    var viewportHeight = $(window).width();

    console.log("viewportHeight: "+viewportHeight);
    console.log("section-2 offset: "+$('#section-2').offset().top);
    console.log("section-3 offset: "+$('#section-3').offset().top);

    $(document).on("scroll",function(){
        var scrollVal = $(window).scrollTop(); 

        // Will rotate when window scroll offset is between section-2 and section-3 (both values minus viewport height)
        if((scrollVal >= $('#section-2').offset().top-viewportHeight) && (scrollVal < $('#section-3').offset().top-viewportHeight)){
            $('.Name1').addClass('rotate');
            console.log("Section 2 entered viewport!");
        }else{
            $('.Name1').removeClass('rotate');
        }

        // Will rotate when document scroll offset is greater than section-3 (value minus viewport height)
        if(scrollVal >= $('#section-3').offset().top-viewportHeight){
            $('.Name2').addClass('rotate');
            console.log("Section 3 entered viewport!");
        }else{
            $('.Name2').removeClass('rotate');
        }
    });

我也对你的CSS做了很小的改动：

.Name1 {
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    transition: all 2s linear;
    width:10%;                          /* added */
}
.Name2 {
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    transition: all 2s linear;
    width:10%;                          /* added */
}
.rotate {
     transform-origin: center;          /* added */
     -ms-transform: rotate(360deg);
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
}

在Fiddle

中查看此操作

Answer 2

您可以使用this来引用该元素，而不是id搜索父级，请检查：

＆＃13;

$(window).scroll(function(event) {
  var scroll = $(window).scrollTop();
  $('h4').each(function(){
    $(this).toggleClass('rotate',
      scroll >= $(this).parents('.cover').offset().top
    );
  })
});
$(window).scroll();

＆＃13;

* {
  margin: 0;
  padding: 0
}
li {
  list-style: none;
}
.cover {
  height: 500px;
}
h4 {
  transform-origin: center;
  display:inline-block;
  font-size: 4em;
}
.Name1 {
  -moz-transition: all 2s linear;
  -webkit-transition: all 2s linear;
  transition: all 2s linear;
}
.Name2 {
  -moz-transition: all 2s linear;
  -webkit-transition: all 2s linear;
  transition: all 2s linear;
}
.rotate {
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol class="curtains">
  <li id="section-1" class="cover">
    <section class="center-block ">
      <div class="wrapper clearfix ">
        <div class="col1-1 centered ">
        </div>
      </div>
    </section>
  </li>
  <li id="section-2" class="cover" style="background-color:#e74c3c ">
    <section class="center-block ">
      <div class="wrapper clearfix ">
        <div class="col1-2 ">
          <h4 class="Name1 ">Name1</h4>
        </div>
      </div>
    </section>
  </li>
  <li id="section-3 " class="cover" style="background-color:#16a085 ">
    <section class="center-block ">
      <div class="wrapper clearfix ">
        <div class="col1-2 ">
          <h4 class="Name2 ">Name 2</h4>
        </div>
      </div>
    </section>
  </li>
</ol>

＆＃13;

到达id时更改CSS

2 个答案: