Wie füge ich aktive Klasse beim Scrollen in div hinzu?

Question

Können Sie mir bitte sagen, wie Sie eine aktive Klasse hinzufügen, während Sie in einem div scrollen? Ich habe einen Container, in dem es vier Divs gibt. In der Fußzeile habe ich auch vier li (erste, zweite, dritte). Ich möchte die li auswählen, wenn der Benutzer das div scrollt.

Beispiel

Wenn der Code ausgeführt wird, sollte die erste li da gewählt werden, das erste div im Hafen Ansicht ist. Wenn der Benutzer scrollt und sich zum zweiten Div bewegt, sollte der zweite li ausgewählt werden. Und so weiter.

habe ich versucht, wie die

https://jsbin.com/giwizufotu/edit?html,css,js,output

(function(){ 
    'use strict'; 
    $(function(){ 
    $("#container").scroll(function() { 
     console.log('scrlling'); 
     if (elementInViewport2($('#first'))) { 
     // The element is visible, do something 
     console.log('first visible') 
    } else { 
     console.log('second visible') 
    } 
    }); 
    }) 

    function elementInViewport2(el) { 
    var top = el.offsetTop; 
    var left = el.offsetLeft; 
    var width = el.offsetWidth; 
    var height = el.offsetHeight; 

    while(el.offsetParent) { 
    el = el.offsetParent; 
    top += el.offsetTop; 
    left += el.offsetLeft; 
    } 

    return (
    top < (window.pageYOffset + window.innerHeight) && 
    left < (window.pageXOffset + window.innerWidth) && 
    (top + height) > window.pageYOffset && 
    (left + width) > window.pageXOffset 
); 
} 

})() 

Ich will nicht Plugin verwenden

Answer 1

I Ich habe versucht, fast den gesamten Code zu verwenden, den Sie mit kleinen Änderungen geschrieben haben:Hierist die Arbeitsbeispiel Link: https://jsfiddle.net/almamun1996/21wc37sx/3/

CSS:

.item { 
    width:25%; 
    display:inline-block; 
    margin:0; 
    padding:0; 
    color:blue; 
    font-size:20px; 
    text-align: center; 
} 
.footer{ 
    border:1px solid; 
    position:fixed; 
    width:100%; 
    bottom:0px; 
} 
#container { 
    border:1px solid red; 
    overflow:auto; 
    width:100%; 
    height:300px; 
} 
.fC{ 
    background-color:yellow; 
    padding:0; 
} 
#first{ 
    background-color:blue; 
} 
#second { 
    background-color:green; 
} 
#third { 
    background-color:pink; 
} 

#fourth { 
    background-color:red; 
} 
.active { 
    background-color : red; 
} 

JS:

(function(){ 
    'use strict'; 
    $(function(){ 
    $('.fC li:eq(0)').css('background-color','red').css('color','#ffffff'); 

    $("#container").scroll(function() { 
    //console.log('scrlling'); 
    if (elementInViewport($('#first'))) { 
    // The element is visible, do something 
    //console.log('first visible') 
} else { 
     //console.log('second visible') 
    } 
}); 

}); 

function elementInViewport(e) { 
    var winBottom = $(window).scrollTop() + $(window).height(); 

    var visibleETop = e.offset().top - winBottom; 

    var first = parseInt($('#first').css('height')); 
    var second = parseInt($('#second').css('height')); 
    var third = parseInt($('#third').css('height')); 
    var fourth = parseInt($('#fourth').css('height')); 

    if(Math.abs(e.offset().top) > first - parseInt($('#container').css('height')) && Math.abs(e.offset().top) <= first+second - parseInt($('#container').css('height'))) 
    { 
     $('.fC li:eq(0)').css('background-color','').css('color',''); 
     $('.fC li:eq(2)').css('background-color','').css('color',''); 
     $('.fC li:eq(3)').css('background-color','').css('color',''); 
     $('.fC li:eq(1)').css('background-color','red').css('color','#ffffff'); 
    } 
    else if(Math.abs(e.offset().top) > first+second - parseInt($('#container').css('height')) && Math.abs(e.offset().top) <= first+second+third - parseInt($('#container').css('height'))) 
    { 
     $('.fC li:eq(0)').css('background-color','').css('color',''); 
     $('.fC li:eq(1)').css('background-color','').css('color',''); 
     $('.fC li:eq(3)').css('background-color','').css('color',''); 
     $('.fC li:eq(2)').css('background-color','red').css('color','#ffffff'); 

    } 
    else if(Math.abs(e.offset().top) > first+second+third - parseInt($('#container').css('height')) && Math.abs(e.offset().top) <= first+second+third+fourth - parseInt($('#container').css('height'))) 
    { 
     $('.fC li:eq(0)').css('background-color','').css('color',''); 
     $('.fC li:eq(1)').css('background-color','').css('color',''); 
     $('.fC li:eq(2)').css('background-color','').css('color',''); 
     $('.fC li:eq(3)').css('background-color','red').css('color','#ffffff'); 

    } 
    else{ 
     $('.fC li:eq(1)').css('background-color','').css('color',''); 
     $('.fC li:eq(2)').css('background-color','').css('color',''); 
     $('.fC li:eq(3)').css('background-color','').css('color',''); 
     $('.fC li:eq(0)').css('background-color','red').css('color','#ffffff'); 
    } 
    if(visibleETop < 0){ 
     return false; 
    }else{ 
     return true; 
    } 

} 

})(); 

HTML: Ersetzen Sie einfach die id='three' zu id='third' im dritten Div von Ihrem HTML.

Answer 2

Sie berücksichtigen sollten, Klassenwechsel basierend auf einer Kanten-

function elementInViewport(e) { 
    var winBottom = $(window).scrollTop() + $(window).height(); 

    var visibleETop = e.offset().top - winBottom; 
    if(visibleETop < 0){ 
     return false; 
    }else{ 
     return true; 
    } 

}