كيف يمكنني الحصول على div ثابت للموضع للتمرير أفقيًا مع المحتوى؟ باستخدام jQuery


Answers

ربما تكون قد انتقلت الآن ، ولكن هنا إجابة لأي شخص آخر يبحث عن حل عنصر ثابت قابل للتمرير أفقيًا. تم إنشاء هذا المكون الإضافي jquery لحل هذه المشكلة بالتحديد.

يستخدم هذا العرض التوضيحي ملخص سلة التسوق الذي سيستمر في التمرير أفقيًا عند تثبيته أعلى الصفحة ؛ كما أنني استخدمتها لرأس الصفحة فوق البيانات المجدولة:

العرض التوضيحي: http://jsfiddle.net/y3qV5/434/ (محدث)

البرنامج المساعد والمصدر: https://github.com/bigspotteddog/ScrollToFixed

الاستعمال:

$(document).ready(function() {
    $('#cart').scrollToFixed( { marginTop: 10 } );
});
Question

لدي div.scroll_fixed مع CSS التالية

.scroll_fixed {
    position:absolute
    top:210px

}
.scroll_fixed.fixed {
    position:fixed;
    top:0;
} 

أنا أستخدم رمز jQuery التالي لتعيين فئة .fixed عندما يصل div إلى أعلى الصفحة.

var top = $('.scroll_fixed').offset().top - parseFloat($('.scroll_fixed').css('margin-top').replace(/auto/, 0));

$(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();

    // whether that's below the form
    if (y >= top) {
        // if so, ad the fixed class
        $('.scroll_fixed').addClass('fixed');
    } else {
        // otherwise remove it
        $('.scroll_fixed').removeClass('fixed');
    }
});

يعمل هذا بشكل رائع في تثبيت التمرير العمودي. ولكن مع نافذة متصفح صغيرة ، يؤدي التمرير الأفقي إلى حدوث تصادم مع المحتوى على يمين هذا div الثابت.

أرغب في التمرير باستخدام المحتوى أفقيًا.

يمكن لأي شخص لي نقطة في الاتجاه الصحيح. لا يزال الحصول على قدمي الرطب مع JS / JQuery.

أريد أن يعمل بشكل أساسي مثل المربع الثاني في هذا المثال .