Effect for different elements (depend on current screen position) that triggered from scroll

Question

We have:

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

In this example effect triggers on hover.

Open fiddle, put your mouse on first <li>and start scroll page down. Question: how make this scroll effect independent from mouse position?

So i need:

1. When you scroll page - elements effected one by one

2. When you hover element - it effected

Answer 1

So I found solution and it is very simple:

First need to add class to hover css effect:

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

and then some jquery magic:

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

what I have:

hover effect works, scroll effect works, this is very compact, no need to attach any plugins I can add any amount of <li>.

Thanks to me