لماذا يوجد مثل هذا الطلب؟ هل وجدت بعض مواقع الويب في الخارج أنه عند التمرير لأعلى ، يطفو شريط التنقل في المركز العلوي. إذا أراد المستخدمون رؤية المحتوى ، فيمكنهم النقر للوصول إليه مباشرةً ، مما يوفر الكثير من وقت السحب. بالطبع ، من الأسهل العودة إلى الأعلى. ولكن في بعض الأحيان يتم التغاضي عن الزر مرة أخرى إلى الأعلى. دعنا نلقي نظرة على الكود والتوضيح ( تقديم jQuery 1.9 ).
لتحديد ما إذا كان الماوس يتم التمرير أو التمرير لأسفل ، يمكنك مقارنة إحداثيات آخر تمرير للمستخدم مع إحداثيات في المرة القادمة. عندما تكون المرة الأخيرة أقل من المرة القادمة ، أي أن المستخدم يتم تمريره لأسفل ، وإلا ، فهذا يعني أن المستخدم يتم التمرير لأعلى. يمكن استخدام قيمة إحداثيات التمرير كقائد Scrolltop للنافذة.
مثال رمز HTML
<div id = "jnav"> <ul> <li> <a href = "http://caibaojian.com/"> تطوير المواجهة على شبكة الإنترنت </a> </li> <li> <A HREF = "#"> المدونة التنمية الأمامية </a> </li> <li> Href = "#"> تطوير الواجهة الأمامية </a> </li> <li> <a href = "#"
أمثلة رمز JavaScript
var $ nav = $ ('#jnav') ، navtop = $ nav.offset (). top ، navh = $ nav.outerheight () ، wintop_1 = 0 ، winwidth = $ (window) .width () ، holder = jquery ('<div>) ؛ $ (window) .on (' scroll '، function () Holder.css ("الارتفاع" ، الماوس للتمرير والعرض إذا (wintop_2> wintop_1 && winwidth> 980)مثال رمز CSS
.NAV {العرض: 980px ؛ الهامش: 0 auto ؛}. nav li {display: inline block ؛ *العرض: مضمّن ؛ *التكبير: 1 ؛ الهامش: 0 10px ؛}. nav li a {display: block ؛ Padding: 5px 10px ؛}. الثابت nav {الموضع: ثابت ؛ العرض: 100 ٪ ؛ أعلى: -40 بكسل ؛ -Webkit-transition: Top .5S ؛ -انتقال الأوز: أعلى .5S ؛ -الران: أعلى .5S ؛ الانتقال: أعلى .5S ؛ -webkit-box-shadow: 0 2px 2px rgba (0،0،0 ، .1) ؛ -moz-box-shadow: 0 2px 2px rgba (0،0،0 ، .1) ؛ box-shadow: 0 2px 2px rgba (0،0،0 ، .1) ؛}.ما سبق هو رمز المثال لكيفية استخدام JS لتنفيذ التنقل العائم عند التمرير للماوس. إذا كنت مهتمًا ، يرجى الرجوع إليه.