Jquery 从滚动触发的不同元素的效果（取决于当前屏幕位置）

我们有：

Html

在本例中，悬停时会触发效果

打开小提琴，将鼠标放在第一个

上，然后开始向下滚动页面。 问题：如何使此滚动效果独立于鼠标位置

因此，我需要：

当您滚动页面时-元素逐个生效

当您悬停元素时，它将生效

---

所以我找到了解决方案，非常简单：

首先需要添加类来悬停css效果：

.h3_sel, .rounded-list h3:hover{
    background: #eee !important;
}
.h3_sel:before, .rounded-list h3:hover:before {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

还有一些jquery的魔力：

$(window).scroll(function () {
    var sc = $(window).scrollTop();
    var c = Math.floor(sc / 70); // 70 depends of your <li> height
    $("h3").removeClass("h3_sel");
    $(".rounded-list li:nth-child("+ c +") h3").addClass("h3_sel");
});

$（窗口）。滚动（函数（）{
var sc=$（window.scrollTop（）；
var c=数学地板（sc/70）；//70取决于你的
身高
$（“h3”）。删除类（“h3_sel”）；
$（“.rounded list li:n个孩子（“+c+”）.h3”）.addClass（“h3_sel”）；
});

我所拥有的：

悬停效果工作，滚动效果工作，这是非常紧凑，不需要附加任何插件，我可以添加任何数量的

---

多亏了我

你见过这个Jquery插件吗？是的，它可以是一个有效的解决方案，但连接整个插件只是为了一个效果，我认为不是理性的，但你可以看看源代码，看看他们是如何做到的

.h3_sel, .rounded-list h3:hover{
    background: #eee !important;
}
.h3_sel:before, .rounded-list h3:hover:before {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

$(window).scroll(function () {
    var sc = $(window).scrollTop();
    var c = Math.floor(sc / 70); // 70 depends of your <li> height
    $("h3").removeClass("h3_sel");
    $(".rounded-list li:nth-child("+ c +") h3").addClass("h3_sel");
});