تغيير بيانات صفحة وفق نسبة الـ سكرول

الفكرة هي أنك بحاجة إلى تعديل تنسيق الـ Header عند عمل سكرول بنسبة معينة، ثم نقوم بإضافة كلاسات أخرى أو تنسيقات،  فمثلاً نستخدم الكود التالي:

const className = "colorful";
const scrollTrigger = 60;

window.onscroll = function() {
  if (window.scrollY >= scrollTrigger) {
    document.getElementsByTagName("header")[0].classList.add(className);
  } else {
    document.getElementsByTagName("header")[0].classList.remove(className);
  }
};

طبق نفسك الفكرة بإضافة وحذف الكلاسات أو إضافة تنسيقات، فالكود السابق يقوم بإضافة كلاس colorful والذي يحمل التنسيق التالي في ملف css:

.colorful  {
  background-color: pink;
  box-shadow: 0 3px 5px 0.3px rgba(0, 0, 0, 0.1);
}

.colorful  a {
  color: #0e436b;
}

بتاريخ On 18‏/11‏/2023 at 12:52 قال Mustafa Suleiman:

الفكرة هي أنك بحاجة إلى تعديل تنسيق الـ Header عند عمل سكرول بنسبة معينة، ثم نقوم بإضافة كلاسات أخرى أو تنسيقات،  فمثلاً نستخدم الكود التالي:

const className = "colorful";
const scrollTrigger = 60;

window.onscroll = function() {
  if (window.scrollY >= scrollTrigger) {
    document.getElementsByTagName("header")[0].classList.add(className);
  } else {
    document.getElementsByTagName("header")[0].classList.remove(className);
  }
};

طبق نفسك الفكرة بإضافة وحذف الكلاسات أو إضافة تنسيقات، فالكود السابق يقوم بإضافة كلاس colorful والذي يحمل التنسيق التالي في ملف css:

.colorful  {
  background-color: pink;
  box-shadow: 0 3px 5px 0.3px rgba(0, 0, 0, 0.1);
}

.colorful  a {
  color: #0e436b;
}

 

اذا كان معي navbar هو fixed يكون overlapingمع section كيف ممكن اعمل padding top متغيير مثلاً كان طول hedder 272 px  و padding top بيكون نفس قيمة عندما عمل سكرول للاسفل حذف جزء header رجع header طوله 150px كيف ممكن اعمل تكامل بين padding و navbar تلقائياً 

انا اسعى اعمل Header زي هذا

sllr.co/7awadet.books

بواسطة React 

ارجعو مساعدة