إصلاح الرأس عند التمرير باستخدام CSS وHTML وjQuery

يعد إنشاء رأس يظل ثابتًا أثناء تمرير الصفحة لأسفل أمرًا متطلبات التصميم المشترك. يمكن تحقيق ذلك باستخدام مزيج من CSS وHTML وJavaScript (jQuery).

التنفيذ باستخدام CSS، HTML

يوفر CSS الموضع: ثابت؛ الخاصية، والتي يمكن تطبيقها على عنصر ما لتحديد موضعه في الصفحة، بغض النظر عن التمرير. ومع ذلك، يتطلب هذا نقطة تشغيل لتحديد متى يجب أن يتم إصلاح العنصر.

دور JavaScript (jQuery)

مطلوب JavaScript لمراقبة حدث التمرير وتحديده متى يتم تطبيق الفئة الثابتة على عنصر الرأس. باستخدام jQuery، يمكن كتابة برنامج نصي بسيط لاكتشاف أحداث التمرير وإضافة أو إزالة الفئة الثابتة وفقًا لذلك.

رمز HTML

.fixed {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
}

كود jQuery

$(window).scroll(function(){ فار لزجة = $('.ملتصق'), التمرير = $(window).scrollTop(); إذا (التمرير >= 100) Sticky.addClass('fixed'); آخر Sticky.removeClass('fixed'); });

$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

مثال موسع: نقطة التشغيل الديناميكية

إذا كانت نقطة التشغيل لإصلاح العنصر غير معروفة، فمن الممكن أن تكون يتم تحديده ديناميكيًا باستخدام Offset().top.

var StickyOffset = $('.sticky').offset().top; $(نافذة).التمرير(وظيفة(){ فار لزجة = $('.ملتصق'), التمرير = $(window).scrollTop(); إذا (التمرير> = StickyOffset) Sticky.addClass('fixed'); آخر Sticky.removeClass('fixed'); });

var stickyOffset = $('.sticky').offset().top;

$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

  if (scroll >= stickyOffset) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

من خلال الجمع بين هذه التقنيات، يمكنك إنشاء رأس ثابت باستخدام CSS، HTML، ومسج.