تثبيت div على التمرير

لا أستطيع فتح الرابط الذي قمت بتقديمه، لكن إذا كنت تبحث عن كود يسمح بتثبيت عنصر div عند التمرير بالنسبة لعناصر الصور على اليمين، يمكنك استخدام CSS لتحقيق ذلك. يمكنك استخدام position: sticky; لتحقيق هذا الهدف. على سبيل المثال، يمكنك تجربة الكود التالي:

cssCopy code
.container {
    display: flex;
    align-items: flex-start;
}

.image-blocks {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.meta {
    background: blue;
    position: sticky;
    top: 0;
    width: 372px;
    height: 100vh;
    margin-right: 10px; /* تضبيط المسافة بين العنصر الثابت وعناصر الصور */
    z-index: 3;
}

يمكنك تغيير القيم حسب احتياجاتك، مع الأخذ في الاعتبار أن دعم تثبيت العناصر (position: sticky;) قد لا يكون متاحًا في جميع المتصفحات، لذا يجب عليك اختباره بشكل جيد.

بالطبع! لتحقيق التأثير الذي ترغب فيه، يجب عليك استخدام JavaScript بالإضافة إلى CSS. يمكنك استخدام الحدث scroll لتحديد ما إذا كان المستخدم قد قام بالتمرير، ثم تحديد ما إذا كان يجب تثبيت div الأزرق أم لا. هناك طرق عديدة لتحقيق ذلك، وإليك مثالًا بسيطًا باستخدام JavaScript:

javascriptCopy code
window.addEventListener('scroll', function() {
    var meta = document.querySelector('.meta');
    var imageBlocks = document.querySelector('.image-blocks');
    var scrollPosition = window.scrollY;

    if (scrollPosition > imageBlocks.offsetTop) {
        meta.style.position = 'fixed';
        meta.style.top = '0';
    } else {
        meta.style.position = 'static';
    }
});

هذا الكود يستمع إلى حدث التمرير، ثم يحدد ما إذا كان الموضع الحالي للتمرير أعلى من العنصر imageBlocks، وإذا كان الأمر كذلك، يُثبت div الأزرق. يجب أيضًا أن تقوم بتضبيط الأسلوب والأبعاد حسب احتياجات التصميم الخاصة بك.