jquery - 从滚动触发的不同元素的效果(取决于当前屏幕位置)

Question

我们有:

HTML

<div class="category1">
    <div class="main_text">
        <ol class="rounded-list">
            <li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
            <li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
            <li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
            <li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
            <li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
            <li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
            <li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
            <li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
            <li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
            <li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
            <li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
            <li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
            <li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
            <li><h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3></li>
        </ol>
    </div>
</div>

CSS

.category1 {

   margin: 10px;
    padding-bottom: 300px;
}
.main_text {

    background: #AFCEE0;
    color: #000;
    line-height: 16px;
    font-size: 14px;
}
.rounded-list {
    counter-reset: li;
    list-style: none;
    *list-style: decimal;
    font: 15px'trebuchet MS', 'lucida sans';
    padding: 5px;
    margin-bottom: 4em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.rounded-list ol {
    margin: 0 0 0 2em;
}
/* -------------------------------------- */
 .rounded-list h3 {
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    background: #ddd;
    color: #444;
    text-decoration: none;
    -moz-border-radius: .3em;
    -webkit-border-radius: .3em;
    border-radius: .3em;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.rounded-list h3:hover {
    background: #eee;
}
.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);
}
.rounded-list h3:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    -moz-border-radius: 2em;
    -webkit-border-radius: 2em;
    border-radius: 2em;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

fiddle

在此示例中，效果在悬停时触发。

打开fiddle，先把鼠标放在<li>上并开始向下滚动页面。 问题:如何使这种滚动效果独立于鼠标位置？

所以我需要:

1. 当您滚动页面时 - 元素一个接一个地受到影响

2. 当您悬停元素时 - 它会起作用

Answer 1

所以我找到了解决方案，而且非常简单:

首先需要添加class来实现hover的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");
});

fiddle

我有什么:

悬停效果有效，滚动效果有效，这非常紧凑，无需附加任何插件我可以添加任意数量的<li> .

谢谢我