كيف يمكن تغيير التنسيق الخاص بعنصر معين عند الوصول لقسم محدد في الصفحة

Mansour Hussen · 22 نوفمبر 2023

مرحباً، محتاج حد ينورني بخصوص هذي ميزة عندما انزل للاسفل يتم تحميل تلقائياً واعتقد هذي لامشكلة ممكن استخدم مكتبة infinte scrol لكن لما انزل يتم تنشيط وجعل Tab في الاعلى active ممكن كيف عمل زي ذي حركة

موقع sllr.co/7awadet.books

تم التعديل في 22 نوفمبر 2023 بواسطة Mustafa Suleiman
تعديل عنوان السؤال

Mustafa Suleiman · 22 نوفمبر 2023

الأمر بسيط، أنت بحاجة إلى استخدام Intersection Observer API من أجل تنفيذ تعليمات معينة عند الوصول لنقطة معينة في الصفحة.

وستجد توضيح للأمر هنا:

وستجد شروحات كثيرة على اليوتيوب بخصوص ذلك يمكنك مشاهدتها والتعلم منها.

عبدالباسط ابراهيم · 23 نوفمبر 2023

كما أخبرك مصطفى في التعليق السابق يمكنك استخدام `Intersection Observer`.

اليك مثال بسيط يظهر كيفية استخدام `Intersection Observer` لتحقيق هذا السلوك:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll Activation</title>
  <style>
    /* يمكنك تخصيص أسلوب التنشيط حسب احتياجاتك */
    .active-tab {
      background-color: #4CAF50;
      color: white;
    }
  </style>
</head>
<body>

  <div id="content">
    <!-- محتوى الصفحة هنا -->
  </div>

  <script>
    // استهداف العنصر الذي تريد تنشيطه
    const targetElement = document.getElementById('content');
    const tabElement = document.getElementById('your-tab-id'); // استبدل بالهوية الفعلية لعلامة التبويب الخاصة بك

    // إعداد Intersection Observer
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          // عندما يكون العنصر مرئيًا
          tabElement.classList.add('active-tab');
        } else {
          // عندما يكون العنصر غير مرئي
          tabElement.classList.remove('active-tab');
        }
      });
    });

    // تمرير العنصر المستهدف إلى Intersection Observer
    observer.observe(targetElement);
  </script>
</body>
</html>

يمكنك تعديل الكود السابق ليتناسب مع المشروع لديك

محمد سعد شحرور · 4 ديسمبر 2023

يمكنك كما أخبرك مصطفى وعبد الباسط، أن تستخدم ال intersection observer، ولكن يوجد طريقة أخرى فعالة جدا وسهلة الاستخدام، وهي الاستماع لحدث النزول او الصعود في الصفحة (scroll)، وجلب موقع العنصر الذي تريد، ومن ثم عند الوصول الى هذا العنصر يمكنك اضافة class او تنسيق معين تريده لكي يصبح العنصر active كما تريد:

// العنصر الذي تريد ان تقوم بعمل اكشن معين عن الوصول اليه
const targetElement = document.getElementById('yourElementId');

// استمع لخاصية التقليب في الصفحةـ صعودا ونزولا
window.addEventListener('scroll', () => {
  // قم بحساب موقع العنصر في الصفحة
  const boundingBox = targetElement.getBoundingClientRect();

  // اقحص اذا قد وصل المستخدم الى العنصر الذي حددناه
  if (boundingBox.top < window.innerHeight) {
    // قم باضافة ماتريد في حال تحقق الشرط، مثل اضافة تنسيق معين لتعيين حالة التفعيل
    console.log('Element is in the viewport!');
  }
});

كيف يمكن تغيير التنسيق الخاص بعنصر معين عند الوصول لقسم محدد في الصفحة

السؤال

Mansour Hussen

3 أجوبة على هذا السؤال

Recommended Posts

Mustafa Suleiman

عبدالباسط ابراهيم

محمد سعد شحرور

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية