0

私を夢中にさせている問題があります。説明しようとしています...私は、約10個のdivが上下にある非常に長いスクロールページを持っています(間にスペースはありません)。表示ポートの下部には、id と position: fixed を持つボタンがあります。上下にスクロールすると、divが上下に移動している間、ボタンが固定されます。表示ポートにある div レイヤーに応じて、ボタンに異なる ID を設定したいと考えています。つまり、1 つの divlayer が使用可能なスペースの 50% 以上を占めると、ボタンの href が変更されるはずです... inview.js を試しましたが、問題は、2 つの div が同時に inview クラスを持っていることです...

私の現在のコード:

$('#div4, #div5, #div6').bind('inview', function (event, visible) {
        if (visible == true) {
        $(this).addClass("inview");

        } else {

        $(this).removeClass("inview");
        }
    });





var $div4 = $('#div4');

if($div4.hasClass("inview")){
    $('#button1').attr('id', 'button2'); 
  }

ご覧のとおり、ビューポートにあるすべての div ボタンが新しい ID を取得します。あなたの誰かが解決策を持っていますか？ありがとうテッド

4

1 に答える 1

1

inview追加する前にクラスを削除してみることができます..次のようなもの：

var $divs = $('#div4,#div5,#div6';
$divs.bind('inview', function (event, visible) {
        $divs.not(this).removeClass("inview");
        if (visible == true) {
          $(this).addClass("inview"); 
        }
     });

もう 1 つの提案は、ウェイポイント プラグインを使用して、div が 50% マークを超えたときに起動することです。

唯一の難しい部分は、方向に応じて、現在の div または上の div を選択する必要があることです。

プラグイン: http://imakewebthings.com/jquery-waypoints/

デモ: http://jsfiddle.net/lucuma/nFfSn/1/

コード：

 $('.container div').waypoint(function (direction) {
        if (direction=='up')
            alert('hit ' + $.waypoints('above')[$.waypoints('above').length-2].id);
        else
            alert('hit ' + $(this).attr('id'));  
    }, {
        offset: $.waypoints('viewportHeight') / 2

});
于 2013-02-07T01:33:41.960 に答える