0

كيف يمكنني عمل فكره الناف بار في حسوب I/O بالجافاسكريبت ؟

اريد عمل فكره الناف بار في حسوب I/O وهي عندما اقوم بالنزول الى اسفل تختفي النافبار وعندما اقوم بالصعود الى اعلى تظهر الناف بار حاولت مرات عديده وقمت بالبحث على stack overflow ولم اجد حلا لها او لم أستطيع صياغة كلماتي في البحث عنها . اريد فقط عمل هذه الفكرة بالجافاسكريبت

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

3
3mmarg97 أضف ردا 
window.addEventListener('scroll', function(e) {
// كود الاخفاء

});

وداخل الحدث لا تنسى ان تتحقق من بعد ال scroll عن الاعلى وعلى اساسه ستقوم بالاخفاء او الاظهار

window.scrollY
0
bahersaad أضف ردا

لقد فعلت هذا من قبل ولكن لم استطع اكمال الباقي انظر الى الكود هنا عندما اقوم بالنزول الى اسفل يختفي الناف من المره الأولى ولكن عندما اصعد لا يظهر معي الى عندما اصعد الى نقطة الصفر لا اعرف حقا اين هي المشكلة اتمنى مساعدتي وهذا هو الكود : https://codepen.io/anon/pen...

3
3mmarg97 أضف ردا

مشكلتك في الشرط ، في شرطك وضعت 

if (window.scrollY)

وهي تكافئ 

if (window.scrollY == true)

ولا يمكن أن يتحقق هذا الشرط إلا عندما يكون scrollY لا يساوي صفر ، لذلك فبمجرد كانت قيمته اكبر من 0 (أي بمجرد أن تنزل للأسفل) سيتحقق الشرط ويتم الإخفاء ، في حال كان الشرط خاطئا سينفذ ما بداخل else ،وهو أمر الإظهار ، ولا يمكن للشرط أن يكون خاطئا إلا إذا كانت القيمة 0 .

لذلك حتى تتحقق من الاتجاه الذي يقوم المستخدم بعمل scroll له ، عليك ان تقارن القيمة السابقة ل scrollY بالقيمة الحالية ، هذا تعديل بسيط على الكود الذي كتبته :

https://jsfiddle.net/Lh0tg7...

1
khaled_IO أضف ردا

....هل جربت التواصل مع فريق المساعدة في حسوب؟*_^

يمكنك استخدام مكتبة ScrollDir

على الرابط

ولمشاهدة مثال على CodePen الرابط https://codepen.io/yowainwr...

أتمنى أنها قامت بالمطلوب على أحسن وجه...