أفضل من الثابتة ، ويبدو ان رمز راس للتمرير وتختفي

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

لماذا يجب عليك كتابه الرؤوس التي تستجيب للتمرير

هناك الكثير من الناس الذين يريدون ان تظهر دائما راس وشريط التنقل إلى المستخدم ، والأعلى من الشاشة 100px اقل من الكثير من الفضاء ، والشعار والقائمة من بلوق علي موقعك ، الخ. هذا قد لا يهم كثيرا علي شاشات سطح المكتب. ومع ذلك ، في المتوسط ، والمستخدمين المتنقلين الذين لا 600px الحجم العمودي تحجب دائما من قبل الحد الأدنى من سدس الشاشة (النظر في الملاحة من المتصفح الخاصة بهم ، ولكن أيضا حول 1/3 ~ 1/4) ، لا يمكن للمستخدم إخفاء أو السيطرة هو عنيف جدا (؟) الانزعاج.

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

3 خطوات لإنشاء راس يتفاعل مع التمرير

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

لاستخدام مسج
1. استيراد البرنامج المساعد مسج.
2. تقوم بتعريف برنامج نصي ليتم استخدامه من قبل المكون الإضافي مسج المستوردة.
3. كنت بحاجه للمس اتش تي ام ال ، PHP ، والمغلق.

تحميل مسج المكونات في

البرنامج المساعد لإنشاء رؤوس التي تستجيب للتمرير هو مسج-2.2.2 الإصدار. لتحميل هذا البرنامج المساعد

<script src="https://code.jquery.com/jquery-2.2.2.js"></script>

.

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>

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

إعلان البرامج النصية في مسج المستوردة في المكونات

بمجرد استدعاء المكون الإضافي ، تحتاج إلى تعريف البرنامج النصي الذي تريد استخدامه.

<script></script>
$ (الدالة {) {
    فار لاستسكرتوب = 0 ،
        دلتا = 15 ؛
    $ (نافذه). التمرير (الدالة (الحدث) {
        فار سانت = $ (هذا). التمرير () ؛
        إذا كان (الرياضيات. Abs (lastالتمرير الأعلى--ST)<= delta) return; delta)=""></= delta) return;>
        إذا كان ((St > lastالتمرير top) &amp; اند (lastالتمرير top-0)) {
            $ ("اسم العنصر"). المغلق ("اعلي" ، "-إخفاء الارتفاع") ؛
        اخر
            $ ("اسم العنصر"). CSS ("Top", "0px");
        }
        [لتلسكرتوب] = [ست];
    });
});  

ضع الفئة أو معرف العنصر الذي تريد التحكم به في اسم العنصر. وضعت عاده وقال. راس. يجب عليك تعيين ارتفاع أو اعلي من العنصر لإخفاء ، لأنه سوف يفجر الشاشة مع-px الخفيفة عندما المخفية. الارتفاع: إذا كنت تريد التحكم في اسم الفئة 50px. الراس

<script></script>
$ (الدالة {) {
    فار لاستسكرتوب = 0 ،
        دلتا = 15 ؛
    $ (نافذه). التمرير (الدالة (الحدث) {
        فار سانت = $ (هذا). التمرير () ؛
        إذا كان (الرياضيات. Abs (lastالتمرير الأعلى--ST)<= delta) return; delta)=""></= delta) return;>
        إذا كان ((St > lastالتمرير top) &amp; اند (lastالتمرير top-0)) {
            $ (". راس"). CSS ("Top", "-50px");
        اخر
            $ (". راس"). CSS ("Top", "0px");
        }
        [لتلسكرتوب] = [ست];
    });
});  

. محتوي هذا البرنامج النصي هو ، "إذا اللمس أو التمرير بالماوس بالكشف عن ان الشاشة لأسفل ، فهذا يعني تغيير اعلي css من. راس إلى-50px ، وتغيير اعلي css من. راس إلى 0px عند التمرير لاعلي."

CSS تعين نمط العناصر ، ويحدد الأعلى الموضع من اعلي شاشه العنصر المحدد بواسطة خاصيه الموضع. وبعبارة أخرى ، الأعلى من الشاشة 0px و-50px للذهاب ذهابا وإيابا.

تغيير CSS لتتناسب مع البرنامج النصي مع مسج

وأخيرا ، يمكنك تغيير CSS وفقا لإعدادات مسج.

<style></style>
راس
الموضع: ثابت;
/* الموقف: الإصلاح مع ثابت */
Z-الفهرس: 20;
/* تعيين المناسبة z-فهرس لأنه يمكن حجبها من قبل عناصر أخرى */
العرض: 100% ؛
/* الشاشة 100 ٪ الحجم الأفقي و */
الارتفاع: 50px ؛
/* جعل راس 50px عموديا */
مربع--التحجيم: الحدود مربع ؛
الانتقال: جميع 0.2 ق سهوله ؛ 
/* يختفي عندما يظهر ويعطي التاثير الذي يبدو علي نحو سلس ، لا حاجه لوضع */
--webkit--الانتقال: جميع 0.2 ق سهوله ؛
-موز--الانتقال: جميع 0.2 ق سهوله ؛
-O-الانتقال: جميع 0.2 ق سهوله ؛
}

مع كل ثلاثه ، يمكننا الرد علي التمرير وإنشاء راس كبيره التي تبدو وكانها تختفي.

رمز الانتهاء

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>

<script></script>
$ (الدالة {) {
    فار لاستسكرتوب = 0 ،
        دلتا = 15 ؛
    $ (نافذه). التمرير (الدالة (الحدث) {
        فار سانت = $ (هذا). التمرير () ؛
        إذا كان (الرياضيات. Abs (lastالتمرير الأعلى--ST)<= delta) return; delta)=""></= delta) return;>
        إذا كان ((St > lastالتمرير top) &amp; اند (lastالتمرير top-0)) {
            $ (". راس"). CSS ("Top", "-50px");
        اخر
            $ (". راس"). CSS ("Top", "0px");
        }
        [لتلسكرتوب] = [ست];
    });
});  


<style></style>
راس
الموضع: ثابت;
Z-الفهرس: 20;
العرض: 100% ؛
الارتفاع: 50px ؛
مربع--التحجيم: الحدود مربع ؛
الانتقال: جميع 0.2 ق سهوله ؛ 
--webkit--الانتقال: جميع 0.2 ق سهوله ؛
-موز--الانتقال: جميع 0.2 ق سهوله ؛
-O-الانتقال: جميع 0.2 ق سهوله ؛
}

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