jqueryを使ってアクティブなクラスを1つだけliに追加する方法は？

Question

https://plnkr.co/edit/9oAmucEO0yvYDJJi8tGK?p=preview

こんにちは ユーザーはそれがdivをチェックスクロールscrolling.Actuallyは、はい、それは2つのdivのは、ビューポートの二つにあるいくつかの時点でfooter.Butにアクティブクラスを追加した場合、ビューポートで来ている間、私はフッターにアクティブなクラスを追加していますアイテムは、私はこれを得た.IF は、ビューポート内in viewport or exit`を入力して任意のイベントwill check div要素は、その後、私はできる午前

$(function() { 
    $("#container").scroll(function() { 
     console.log('scrolling'); 
     $('#container > div').each(function (i, left) { 
     console.log(this) 
     console.log($(this)) 
     var md = $(this).attr('data-msid'); 
     console.log($(this).isOnScreen()) 
     if($(this).isOnScreen()){ 
      $('.fC li[data-msidatrr='+md+']').addClass('active'); 
     }else { 
      $('.fC li[data-msidatrr='+md+']').removeClass('active'); 
     } 
     }) 
    }); 
    $.fn.isOnScreen = function() { 

     var win = $(window); 

     var viewport = { 
     top: win.scrollTop(), 
     left: win.scrollLeft() 
     }; 
     viewport.right = viewport.left + win.width(); 
     viewport.bottom = viewport.top + win.height(); 

     var bounds = this.offset(); 
     bounds.right = bounds.left + this.outerWidth(); 
     bounds.bottom = bounds.top + this.outerHeight(); 

     return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); 


    } 
    }) 

Answer 1

にフッターにあなたの項目を1つだけ選択する項目が1つしかslectedされる必要がある.IS .Butを選択しますこの行を追加できます

$('.item').removeClass('active'); 

文は、その後になる場合で結果コード：

if($(this).isOnScreen()){ 
     $('.item').removeClass('active'); 
     $('.fC li[data-msidatrr='+md+']').addClass('active'); 
    } 

説明： 最初にすべてのリストからアクティブなクラスを削除してから、必要な1のためにのみ追加します。

Answer 2

私はあなたのための解決策を見つけたと思う。

まず、あなたがこれに$("#container").scrollコールバックを変更する必要があります。

var elActive = null; 
    $('.fC li').removeClass('active'); 
    $('#container > div').each(function (i, left) { 
    var md = $(this).attr('data-msid'); 
    if($(this).isOnScreen()){ 
     elActive = $('.fC li[data-msidatrr='+md+']'); 
     //return false; // uncomment to get the first of the list 
    } 
    }); 
    if(elActive) elActive.addClass('active'); 

これは、すべてのli項目からクラスactiveを削除し、すべてのdiv Sを反復し、画面上のでチェックその要素のliを変数elActiveに配置します。
その後、elActive要素にcassを追加します。

しかし、これだけの変更で、まだ奇妙な行動、私はあなたにもこれに$.fn.isOnScreen機能を変更することができると思う：

var win = this.closest('[scrollable]') || $(window); 

    var viewport = { 
    top: win.scrollTop(), 
    left: win.scrollLeft() 
    }; 
    viewport.right = viewport.left + win.width(); 
    viewport.bottom = viewport.top + win.height(); 

    var bounds = this.offset(); 
    bounds.right = bounds.left + this.outerWidth(); 
    bounds.bottom = bounds.top + this.outerHeight(); 

    return (
     !(viewport.right < bounds.left 
      || viewport.left > bounds.right 
      || viewport.bottom < bounds.top 
      || viewport.top > bounds.bottom)); 

これは今、もうscrollTopスプライトをチェックしませんスクロールのオフセット境界をチェックされています（新しい"ビューポート"）とその中の要素のオフセット（関数内のthis参照）を使用して、その要素が画面に表示されているかどうかを教えてください。
この動作を確認するには、属性を#container要素に追加します。

この変更は、あなたが期待している動作を提供すると思います。ここで

は私が言うの変更で、あなたの例のフォークです：
https://plnkr.co/edit/bK1h0YF2tabiWPpjQUNh?p=preview