Javascript 达到id时更改CSS

当达到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);
}

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

JS

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

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

---

我修改了您的代码，使标题从页面底部进入视口时出现旋转效果。

这就是我对«在滚动过程中到达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');
        }
    });

---

请参见

中的实际操作。我修改了代码，使标题从页面底部进入视口时出现旋转效果。

这就是我对«在滚动过程中到达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');
        }
    });

---

查看中的操作。您可以使用

this

引用元素，而不是

id

搜索父元素，请选中此项：

$（窗口）。滚动（函数（事件）{
var scroll=$（窗口）.scrollTop（）；
$（'h4'）。每个（函数（）{
$（this）.toggleClass（'rotate'，
滚动>=$（此）.parents（'.cover'）.offset（）.top
);
})
});
$（window.scroll（）
*{
保证金：0；
填充：0
}
李{
列表样式：无；
}
.掩护{
高度：500px；
}
h4{
变换原点：中心；
显示：内联块；
字号：4em；
}
.Name1{
-moz转变：所有2s线性；
-webkit转换：所有2s线性；
过渡：所有2s线性；
}
.姓名2{
-moz转变：所有2s线性；
-webkit转换：所有2s线性；
过渡：所有2s线性；
}
.轮换{
-moz变换：旋转（360度）；
-webkit变换：旋转（360度）；
变换：旋转（360度）；
}




名称1


名称2

您可以使用
this
引用元素，而不是
id
搜索父元素，请选中此项：


$（窗口）。滚动（函数（事件）{
var scroll=$（窗口）.scrollTop（）；
$（'h4'）。每个（函数（）{
$（this）.toggleClass（'rotate'，
滚动>=$（此）.parents（'.cover'）.offset（）.top
);
})
});
$（window.scroll（）
*{
保证金：0；
填充：0
}
李{
列表样式：无；
}
.掩护{
高度：500px；
}
h4{
变换原点：中心；
显示：内联块；
字号：4em；
}
.Name1{
-moz转变：所有2s线性；
-webkit转换：所有2s线性；
过渡：所有2s线性；
}
.姓名2{
-moz转变：所有2s线性；
-webkit转换：所有2s线性；
过渡：所有2s线性；
}
.轮换{
-moz变换：旋转（360度）；
-webkit变换：旋转（360度）；
变换：旋转（360度）；
}




名称1


名称2

滚动时到达id=“Name2”是什么意思？滚动时到达id=“Name2”是什么意思？滚动时到达id=“Name2”时我只是完全更改了答案。我只是完全更改了答案。