اذهب إلى المحتوى

السؤال

Recommended Posts

  • 0
نشر (معدل)
  • لتعمل الdata-spy جيدا معك لابد من تغيير الoffest الى  data-bs-offset
<body data-bs-spy="scroll" data-bs-target="#navbar" data-bs-offset="100">

حيث انه عند الوصول ل 100px من القسم يتم التغير فى النافبار ويصبح فعال على navlink حسب كل قسم 
أى أن  data-bs-offset تحدد قيمة الجزء المراد من السكشن وبناءا عليه يتغير الnavlink الفعال
أو بامكانك جعلها ديناميكية بالجافا سكربت 

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
    target: '#navbar',
    offset:function () {
 
// هنا يتم وضع ال offset
//بطريقة تفاعلية مع الصفحة على حسب ال scrool
        return offset;
    }
});

 

  • يظل الactive على النافبار لمدة لأنك في الstyle.css عليه خاصية transition
transition: all 0.6s ease-in-out;

عليك تقليل  قيمة الوقت ليصبح  0.1s مثلا أوكما تريد 

transition: all 0.1s ease-in-out;

 

تم التعديل في بواسطة Mustafa Mahmoud7
  • 0
نشر

مرحبا احمد
بعد مراجعت الكود  المرسل الخطا اللي عندك خطا syntax في عبارة
 

<body data-bs-spy="scroll" data-bs-target="#navbar" offset="120">

offset بذاللك لا تعمل
يجب ان تكون كذاللك لكي تعمل لديك
 

<body data-bs-spy="scroll" data-bs-target="#navbar" data-bs-offset="120">

 

بتاريخ منذ ساعة مضت قال Ahmed Ebrahim11:

ان active يظهل عند navlink محدد لمده رغم تغير السكشن

ذاللك انه
في ملف style
كما ذكر الزميل

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...