لا أستطيع فتح الرابط الذي قمت بتقديمه، لكن إذا كنت تبحث عن كود يسمح بتثبيت عنصر div
عند التمرير بالنسبة لعناصر الصور على اليمين، يمكنك استخدام CSS لتحقيق ذلك. يمكنك استخدام position: sticky;
لتحقيق هذا الهدف. على سبيل المثال، يمكنك تجربة الكود التالي:
css.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;
) قد لا يكون متاحًا في جميع المتصفحات، لذا يجب عليك اختباره بشكل جيد.
-
كيفية تثبيت Minishlink/web-push في Laravel16/03/2024
-
التلعيب Gamification: الدوافع17/11/2023
-
تصميم العناصر كتلة في صفحة الويب11/03/2024
المزيد من المعلومات
بالطبع! لتحقيق التأثير الذي ترغب فيه، يجب عليك استخدام JavaScript بالإضافة إلى CSS. يمكنك استخدام الحدث scroll
لتحديد ما إذا كان المستخدم قد قام بالتمرير، ثم تحديد ما إذا كان يجب تثبيت div
الأزرق أم لا. هناك طرق عديدة لتحقيق ذلك، وإليك مثالًا بسيطًا باستخدام JavaScript:
javascriptwindow.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
الأزرق. يجب أيضًا أن تقوم بتضبيط الأسلوب والأبعاد حسب احتياجات التصميم الخاصة بك.