تحديد الموضع على المحور السيني فقط في CSS

عند تصميم تخطيطات الويب، غالبًا ما يكون من المرغوب فيه تثبيت العناصر على محور معين أثناء لا يزال يسمح بالتمرير في اتجاهات أخرى. أحد السيناريوهات الشائعة هو إصلاح عنصر على المحور السيني بحيث يظل في مكانه أفقيًا بينما يقوم المستخدم بالتمرير عموديًا.

هل هذا ممكن؟

نعم، من الممكن تحديد موضع على المحور السيني فقط باستخدام CSS.

كيفية تحقيق ذلك

لتحقيق ذلك هذا، اتبع الخطوات التالية:

1. اضبط موضع العنصر على "مطلق" : يؤدي ذلك إلى إزالة العنصر من التدفق الطبيعي للمستند ويسمح لك بتحديد موضعه بدقة.
2. استخدم خاصية "يسار" : حدد الحافة اليسرى للعنصر بالنسبة لأقرب موضع ancestor.
3. استخدم jQuery: استخدم jQuery للرد على أحداث التمرير وضبط موضع العنصر وفقًا لذلك.

jQuery وCSS مثال:

$(window).scroll(function() {
    $('#header').css({
        'left': $(this).scrollLeft()   15 // Adjust based on CSS 'left'
    });
});

#header {
    top: 15px;
    left: 15px;
    position: absolute;
}

البرنامج النصي المتقدم:

لدعم تغييرات CSS الديناميكية، يمكنك استخدام هذا البرنامج النصي المحدث:

var leftOffset = parseInt($('#header').css('left')); // Grab initial left position
$(window).scroll(function() {
    $('#header').css({
        'left': $(this).scrollLeft()   leftOffset // Use initial offset
    });
});

باتباع هذه الخطوات، يمكنك إصلاح موضع العنصر على المحور السيني بشكل فعال مع الاستمرار في السماح بالتمرير العمودي.