يتم إصلاح القائمة عند التمرير وتمتد. كيف يمكنني قفل الطبقة بحيث تبقى في مكان واحد عند تمرير الصفحة؟ كيفية عمل قائمة ثابتة في الأسفل

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

إصلاح القائمة الأفقية باستخدام CSS: الموضع: ثابت

من ناحية، كل شيء بسيط وسهل الحل باستخدام CSS في أي وقت من الأوقات. مثال لتخطيط HTML لقائمة أفقية ثابتة:

بيت
أخبار
جهات الاتصال
يبحث

[محتوى الصفحة] [تذييل الموقع]

تخطيط CSS لقائمة أفقية ثابتة:

# القائمة العلوية ثابتة تقريبًا (الموضع: ثابت؛ الأعلى: 10 بكسل؛ اليسار: 0؛ الارتفاع: 30 بكسل؛ العرض: 100%؛ الهامش: 0؛)

لنقم الآن بتعيين المسافة البادئة لمحتوى الصفحة بما يساوي ارتفاع القائمة:

#content (الهامش العلوي: 30 بكسل؛)

والآن نجحنا "تقريبًا". القائمة "دائما في الأفق" للزائر. ولكن ماذا يجب أن نفعل إذا كان لدينا رأس موقع في تصميمنا، متبوعًا بالقائمة نفسها، وفي الرأس لدينا شعار وشعار الموقع واللافتات.

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

إصلاح القائمة الأفقية باستخدام جافا سكريبت

لذلك، دعونا نفكر في الخيار عندما "تنتقل" القائمة خلف رأس الموقع، ولكن إذا قام الزائر بالتمرير لأسفل بشكل نشط، فستكون القائمة "ثابتة" في الأعلى وتظل في مكانها. رأس الموقع غير مرئي. إذا عاد الزائر إلى رأس الصفحة، "تصبح" القائمة في مكانها "خلف رأس الموقع". في البداية، إليك تخطيط HTML الكامل لمثال لتخطيط الصفحة:

شعار الموقع شعار الموقع

بيت
أخبار
جهات الاتصال
يبحث

[محتوى الصفحة] [تذييل الموقع]

يتكون قالب موقعنا من عدة مجالات نموذجية:

رؤوس المواقع – #header, الارتفاع 150 بكسل
القائمة الأفقية – #menu-top-fixed تقريبًا- الارتفاع 30 بكسل،
منطقة المعلومات الرئيسية للصفحة – #محتوى,
تذييل الموقع - #تذييل.

إليك تخطيط CSS:

#menu-top-fixed تقريبًا (الموضع: ثابت؛ الهامش: 0؛ اليسار: 0؛ الأعلى: 150 بكسل؛ الارتفاع: 30 بكسل؛) #header (العرض: كتلة؛ الارتفاع: 150 بكسل؛ الفائض: مخفي؛ الموضع: نسبي؛ الهامش -الجزء السفلي: 55 بكسل؛) #القائمة العلوية ثابتة تقريبًا ul، #القائمة العلوية ثابتة تقريبًا li(نمط القائمة: لا شيء؛ الهامش: 0؛ الحشو: 0;) #القائمة العلوية ثابتة تقريبًا ul (عرض: كتلة؛ محاذاة النص: المركز؛ العرض: 100%؛ تعويم: يسار؛) #قائمة علوية ثابتة تقريبًا ul li(عرض: مضمن؛ ارتفاع الخط: 30 بكسل؛ العرض: 120 بكسل؛ الحشو: 0 5 بكسل محاذاة النص: المركز؛

أولاً، لنضع مسافة بادئة من الرأس إلى المحتوى تساوي ارتفاع قائمتنا + مسافة بادئة صغيرة بهامش للجمال الجمالي. #header ( الهامش السفلي: 55px; ) . دعونا نصلح قائمتنا خلف الرأس مباشرة: #menu-top-almost-fixed( Position: Fixed; Margin: 0; left: 0; top: 150px; height: 30px; ) .

الآن دعونا نتأكد من أنه عند التمرير، يتم "إصلاح" القائمة تمامًا في الجزء العلوي من الصفحة. لنضع جافا سكريبت التالي بين و:

جافا سكريبت:

فار م1 = 150؛ /* ارتفاع الرأس بالبكسل */ var m2 = 2; /* المسافة البادئة عندما لا يكون الرأس مرئيًا أثناء التمرير */ var MenuID = "menu-top-almost-fixed"; /* معرف القائمة الأفقية المراد تثبيتها */ var MenuOpacityOnChange = "0.7"; /* شفافية القائمة عند التمرير: 1 - معتم، 0.5 - نصف شفاف 0.0 - شفاف تمامًا */ var MenuOpacityOnChangeIE = MenuOpacityOnChange * 100; /* وظيفة لتحديد المسافة البادئة عبر المستعرضات من أعلى المستند إلى الموضع الحالي لشريط التمرير */ function getScrollTop() ( var scrOfY = 0; if(typeof(window.pageYOffset) == "number" ) ( // متوافق مع Netscape scrOfY = window.pageYOffset ; ) else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) ( // DOM متوافق مع scrOfY = document.body.scrollTop; ) آخر if(document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) ( //IE6 Strict scrOfY = document.documentElement.scrollTop; ) return scrOfY ) /* الدالة التي تحدد الحشوة العلوية لـ "العائمة" "قائمة أفقية ثابتة اعتمادًا على موضع شريط التمرير ورؤوس الرؤية */ الدالة هامشMenuTop() ( var top = getScrollTop(); var s = document.getElementById(menuID); if(typeof s != "undef" && s)( if (أعلى + م2< m1) { s.style.top = (m1-top) + "px"; s.style.filter = s.style.filter.replace("progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")",""); s.style.opacity = "1"; } else { s.style.top = m2 + "px"; s.style.opacity = menuOpacityOnChange; s.style.filter = s.style.filter.replace("progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")",""); s.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")"; } } } /** функция регистрирует вычисление позиции «плавающего» меню при прокрутке страницы **/ function setMenuPosition(){ if(typeof window.addEventListener != "undefined"){ window.addEventListener("scroll", marginMenuTop, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onscroll", marginMenuTop); } marginMenuTop(); } /** регистрируем вызов необходимых функций после загрузки страницы **/ if(typeof window.addEventListener != "undefined"){ window.addEventListener("load", setMenuPosition, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onload", setMenuPosition); }

يمكنك مشاهدة مثال على التنفيذ باتباع هذا الرابط واستخدام عجلة التمرير. لذلك، كل شيء بسيط هنا. في الإعدادات نقوم بتمرير المعلمات التالية إلى البرنامج النصي:

فار م1 = 150؛ - ارتفاع الرأس بالبكسل،
فار م2 = 2؛ - مسافة بادئة عندما لا يكون الرأس مرئيًا أثناء التمرير،
var MenuID = "القائمة العلوية ثابتة تقريبًا"; - معرف القائمة الأفقية لتثبيت،
فار القائمةOpacityOnChange = "0.7"; - شفافية القائمة عند التمرير:
- 1 - مبهمة
- 0.5 - شفاف
- 0.0 - شفاف تمامًا

في هذا الإصدار، قمنا "بضبط" قائمتنا قليلاً، وعند التمرير نضيف إليها الشفافية. يقترح خيار أكثر كلاسيكية نفسه على الفور، عندما لا نغير شفافية القائمة، ولكن ببساطة نقوم بإنشاء خلفية للقائمة في شكل خلفية مع لون القائمة وحد شفاف أقل (حيث ينتقل التدرج بسلاسة " ” من لون معتم إلى لون شفاف):

دعونا نغير تخطيط CSS قليلاً لقائمتنا الثابتة الأفقية:

#menu-top-fixed تقريبًا (الموضع: ثابت؛ الهامش: 0؛ اليسار: 0؛ الأعلى: 150 بكسل؛ الارتفاع: 30 بكسل؛ الخلفية: url(./images/white-gradient-l.png) تكرار أسفل اليسار-x ;)

الآن دعونا نعطي كود جافا سكريبت المعدل، والذي سنضعه بين و :

جافا سكريبت:

فار م1 = 150؛ /* ارتفاع الرأس بالبكسل */ var m2 = 0; /* المسافة البادئة عندما لا يكون الرأس مرئيًا أثناء التمرير */ var MenuID = "menu-top-almost-fixed"; /* وظيفة لتحديد المسافة البادئة عبر المستعرضات من أعلى المستند إلى الموضع الحالي لشريط تمرير التمرير */ function getScrollTop() ( var scrOfY = 0; if(typeof(window.pageYOffset) == "number" ) ( // متوافق مع Netscape scrOfY = window.pageYOffset ; ) else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) ( // DOM متوافق مع scrOfY = document.body.scrollTop; ) آخر if(document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) ( //IE6 Strict scrOfY = document.documentElement.scrollTop; ) return scrOfY ) /* الدالة التي تحدد الحشوة العلوية لـ "العائمة" "قائمة أفقية ثابتة اعتمادًا على موضع شريط التمرير ورؤوس الرؤية */ الدالة هامشMenuTop() ( var top = getScrollTop(); var s = document.getElementById(menuID); if(typeof s != "undef" && s)( if (أعلى + م2< m1) { s.style.top = (m1-top) + "px"; } else { s.style.top = m2 + "px"; } } } /** функция регистрирует вычисление позиции «плавающего» меню при прокрутке страницы **/ function setMenuPosition(){ if(typeof window.addEventListener != "undefined"){ window.addEventListener("scroll", marginMenuTop, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onscroll", marginMenuTop); } } /** регистрируем вызов необходимых функций после загрузки страницы **/ if(typeof window.addEventListener != "undefined"){ window.addEventListener("load", setMenuPosition, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onload", setMenuPosition); }

لذلك، كل شيء بسيط هنا. في الإعدادات نقوم بتمرير المعلمات التالية إلى البرنامج النصي:

فار م1 = 150؛ - ارتفاع الرأس بالبكسل،
فار م2 = 0؛ - مسافة بادئة عندما لا يكون الرأس مرئيًا أثناء التمرير.

تعمل القائمة بشكل جيد، ولكن إذا قمت بإعادة تحميل الصفحة، فستظهر القائمة مع المسافة البادئة الأولى

إذا كانت هناك مشكلة من هذا القبيل، فأنت بحاجة إلى استدعاء القائمة بعد تحميل الصفحة مرة واحدة. للقيام بذلك، قم بتغيير رمز استدعاء الوظيفة من:

الدالة setMenuPosition())( if(typeof window.addEventListener != "undefent")( window.addEventListener("scroll", MarginMenuTop, false); ) else if(typeof window.attachEvent != "undefent")( window.attachEvent ( "التمرير"، هامشMenuTop)؛

إلى الكود التالي:

بعد تحميل الصفحة، نستدعي على الفور وظيفة هامش القائمة، والتي ستقوم بالتحقق من موضع القائمة على الصفحة وتطبيق النمط المطلوب

تنفيذ قائمة ثابتة جزئيًا باستخدام البرنامج المساعد Afixx jQuery من Twitter Bootstrap

استكمالًا لهذا الموضوع، تمت كتابة مقال لك حول تنفيذ قائمة شبه ثابتة باستخدام المكون الإضافي jQuery Affix من إطار عمل Twitter Bootstrap.

أول شيء سنفعله هو لصق كود HTML الخاص بنا في المكان الذي تريد رؤية القائمة فيه على موقعك.

بيت
ووردبريس
HTML5 وCSS3
بي أتش بي

يتم تعيين الفئة الافتراضية للقائمة، والتي بفضلها يمكن لبرنامج jquery الخاص بنا تحديد أن هذه الكتلة المعينة تحتاج إلى تثبيتها في الأعلى.

2. كود مسج

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

$(document).ready(function())( var $menu = $("#menu"); $(window).scroll(function())( if ($(this).scrollTop() > 100 && $ hasClass("default"))( $menu.fadeOut("fast",function())( $(this).removeClass("default") .addClass("fixed transbg") .fadeIn("fast"). ; ) ) ; وإلا إذا($(this).scrollTop()

يرجى ملاحظة أنه إذا كانت هناك علامات اقتباس مفردة في الكود الموجود في echo "" ، فيجب حذفها، أي. ضع أمام كل واحد منهم شرطة مائلة عكسية (\) بدون قوسين بالطبع.

بشكل عام، اتضح كما اتضح. سيتعين عليك أن تقرر بنفسك كيفية إرفاق هذا بموضوعك على وجه التحديد - عندما يكون لديك الوقت، يكون من الممتع "إثارة عقلك". شكرًا لك.

كل التوفيق لك! نراكم قريبا على صفحات موقع المدونة

أنت قد تكون مهتم

WebPoint PRO عبارة عن سمة WordPress سريعة الاستجابة مع وظائف واسعة وتحسين كفاءة محرك البحث الفني
Share42 - برنامج نصي لإضافة أزرار الشبكات الاجتماعية والإشارات المرجعية إلى الموقع (يوجد خيار اللوحة العائمة)

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

Auto-Hide Sticky HeaderjQuery المكون الإضافي للملاحة الثابتة، والذي يعمل على مبدأ مشابه للبرنامج النصي أعلاه، ولكنه أقل سلاسة، على الرغم من أنه للوهلة الأولى، أسهل قليلاً. لسوء الحظ، لا أستطيع أن أقول إن التنقل قابل للتكيف بالكامل، لأنه على الشاشات الصغيرة، تصبح عناصر القائمة مجرد أرقام، وهو أمر غريب للغاية.

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

On-Scroll Animated Header مكون إضافي جيد لتنفيذ شريط التنقل الثابت. يعمل الأمر على النحو التالي: في بداية الصفحة، نرى رأسًا طويلًا يحتوي على الشعار والقائمة. عند التمرير، تتضاءل منطقة الرأس بكل العناصر، بما في ذلك الشعار والملاحة، بسلاسة باستخدام الخصائص وتصبح شريطًا ضيقًا عالقًا في الجزء العلوي من الشاشة.

اليوم نقوم بإصلاح القائمة عند تمرير الصفحة، دعونا نلقي نظرة على أفضل خيار للتنفيذ.

كيف نصلح القائمة؟

هناك طريقتان لإصلاح القائمة:

قم بإصلاح القائمة فقط إذا تم تمرير الصفحة لأسفل بدرجة كافية
إصلاح القائمة بشكل دائم

إصلاح القائمة عند تمرير الصفحة

تتطلب هذه الطريقة JS وCSS. أولاً، نحتاج إلى تحديد مدى تمرير الصفحة لأسفل، وبعد ذلك، إذا كانت هذه القيمة أكبر من قيمة معينة (على سبيل المثال، أكبر من حجم الشاشة)، فسنقوم بإصلاح القائمة. لنلقي نظرة على مثال:

$(window).scroll(function())( var docscroll=$(document).scrollTop(); if(docscroll>$(window).height())( $("nav").css(("height " : $("nav").height(),"width": $("nav").width())).addClass("fixed" )else( $("nav").removeClass("fixed" "); ) ));

أي أنه عند تمرير الصفحة، نتحقق "ما إذا كان مقدار تمرير الصفحة أكبر من ارتفاع النافذة"، وإذا كان أكبر، نضيف الفئة الثابتة إلى قائمتنا (ونحدد الارتفاع والعرض، لأنه عند استخدام الموضع: يتم فقدان أبعاد الكتلة)، وإلا قم بحذف هذه الفئة.

ثابت (الموضع: ثابت؛ أعلى: 0؛ يسار: 0؛)

أي أنه في حالة وجود مثل هذه الفئة، سيصبح الكائن ثابتًا.

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

نقوم دائمًا بإصلاح القائمة (خيار التثبيت الثاني)

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