jQueryスクロール機能スティッキーヘッダーはスクロールする必要があります

私はstickyjsを使用しています。jQueryスクロール機能スティッキーヘッダーはスクロールする必要があります

広いコンテナのため、すべてのデータを表示するには右にスクロールする必要があります。

粘着性のあるヘッダーでは、コンテナ内をスクロールする必要がありますが、何かがブレーキをかけます。右にスクロールし、次に下に、次に下に移動すると、スティッキーなナビゲーション（トリガーされたとき）が位置を失うのがわかります。

オフセットなどを計算する必要はありますか？

スティッキースタートにオフセット機能などがないと感じました。

$('#menu-wrapper').on('sticky-start', function() { 
    console.log("Started"); 
    $('.menu-wrapper').css('left', 'auto'); 
    $('.is-sticky .menu-wrapper').css('left', -$(this).offset() + "px"); 

    $('.container-compare').scroll(function() { 
     $('.is-sticky .menu-wrapper').css('left', -$(this).scrollLeft() + "px"); 
    }); 
});

Demo

出典

2017-09-21 user3699998

それは便利だかどうかわからないと$('.menu-wrapper').removeAttr('style');を置き換え$(".is-sticky .menu-wrapper").css("left", -offset);へ$(".is-sticky .menu-wrapper").css(this.tagName + " coords (" + offset.left + ")");を変えvar offset = $('.container-compare').scrollLeft();

にvar offset = $(this).offset();を変更しましたが、私は純粋なJSと粘着性のバーを作った：まとめる事が私が変更されましたとCSS。私はちょうど 'position：fixed'で余分なクラスを作り、現在のスクロールの長さに従ってそれを追加したり削除したりしました。 – Sergey

@Sergeyはここでうまくいきます、私は要件としてstickyjsを使用しています。私は、この問題を修正する必要があります。これは、固定ヘッダーが再開したときのオフセットまたは位置に関連していると思います。 – user3699998

残念ながら、再現できません。 61クロムでそれは正常に動作します。 – Sergey

フォークフィドルを指しlinkがあります。

が
が$('.menu-wrapper').css('left', '0');

出典

2017-09-22 15:56:32 Sergey

jQueryスクロール機能スティッキーヘッダーはスクロールする必要があります

答えて

関連する問題