كيفية جعل التنقل Divi الخاص بك يبدأ من الأسفل ، ثم ابق ثابتًا في الأعلى عند التمرير

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

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

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

قسم البطل: وحدة رأسية بعرض كامل مع وضع ملء الشاشة

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

ابدأ بفتح أو إنشاء الصفحة حيث تريد إضافة هذا التأثير. بعد ذلك ، افتح Fullwidth Header أو قم بإنشائه وانتقل إلى علامة التبويب Design. أول شيء ستصادفه في علامة تبويب التصميم هو فئة التخطيط الفرعية. انطلق وقم بتمكين وضع ملء الشاشة في تلك الفئة الفرعية.

إنشاء التنقل الثابت عند التمرير

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

أضف كود CSS المطلوب

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

أضف كود CSS من خلال أداة تخصيص السمة

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

لإضافة رمز CSS ، افتح لوحة معلومات WordPress الخاصة بك> انتقل إلى المظهر> تخصيص> قم بالتمرير لأسفل في علامة التبويب وافتح علامة التبويب CSS الإضافية> أضف سطور رموز CSS التالية:

#main-header {
position: absolute;
top: auto;
bottom: 0;
}

أضف كود CSS من خلال خيارات النسق

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

لإضافة الرمز إلى "خيارات السمة" الخاصة بك ؛ انتقل إلى لوحة معلومات WordPress> Divi> Theme Options> قم بالتمرير لأسفل في علامة التبويب General والصق الكود التالي في حقل Custom CSS:

#main-header { 
position: absolute; 
top: auto; 
bottom: 0; 
}

أضف كود CSS إلى صفحة واحدة فقط

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

افتح الصفحة حيث تريد إضافة التنقل الثابت عند التمرير. بعد ذلك ، سترى الرمز التالي في الزاوية اليمنى من المنشئ:

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

#main-header { 
position: absolute; 
top: auto; 
bottom: 0; 
}

أضف كود jQuery المطلوب

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

أضف كود jQuery من خلال خيارات النسق

لتطبيق الكود على جميع الصفحات على موقع الويب الخاص بك ، يمكنك إضافة الكود إلى خيارات السمة. انتقل إلى لوحة معلومات WordPress> انتقل إلى Divi> متابعة إلى خيارات السمة> افتح علامة تبويب التكامل> والصق الكود التالي في حقل "<head> في مدونتك":

<script text="text/javascript">
jQuery(function($){
$(window).bind('scroll', function() {
var windowHeight = $(window).height();
if ($(window).scrollTop() < windowHeight) {
$("#main-header").css("position","absolute").css("top","auto").css("bottom",0);
}
else {
$("#main-header").css("position","fixed").css("bottom","auto").css("top",0);
}
});
});
</script>

أضف كود jQuery من خلال وحدة التعليمات البرمجية

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

ارجع إلى تلك الصفحة وأضف قسمًا قياسيًا في الجزء العلوي من صفحتك. ضمن هذا القسم القياسي ، أضف وحدة التعليمات البرمجية. يمكنك بالفعل وضع هذا القسم في أي مكان تريده ، ولكن إذا كنت تريد العثور عليه بسرعة ، فننصحك بوضعه أعلى صفحتك. بعد ذلك ، انسخ الكود التالي والصقه في Content Box لوحدة التعليمات البرمجية الخاصة بك:

<script text="text/javascript">
jQuery(function($){
$(window).bind('scroll', function() {
var windowHeight = $(window).height();
if ($(window).scrollTop() < windowHeight) {
$("#main-header").css("position","absolute").css("top","auto").css("bottom",0);
}
else {
$("#main-header").css("position","fixed").css("bottom","auto").css("top",0);
}
});
});
</script>

وهذا كل شيء! يجب أن تعمل الشفرة الآن وتحول قائمتك وتجعل موقع الويب الخاص بك أكثر تفاعلية.

افكار اخيرة

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

تأكد من الاشتراك في النشرة الإخبارية عبر البريد الإلكتروني وقناة YouTube حتى لا يفوتك إعلان كبير أو نصيحة مفيدة أو Divi freebie!

صورة مميزة من DenisXize / shutterstock.com