तय से बेहतर है, हैडर कोड को स्क्रॉल और गायब लगता है

बस स्थिति: फिक्स्ड, बजाय एक साइट शीर्ष लेख या नेविगेशन एक शैली में लगाए, हेडर है कि पुस्तक के जवाब में दिखाई देते है दूर फीका और स्क्रीन बहुत बेहतर है । शीर्षक है कि स्क्रॉल करने के लिए प्रतिक्रिया करता है एक साइट लोगो, मेनू, नेविगेशन पट्टी, आदि है कि एक अधिक कुशल और सुखद उपयोगकर्ता अनुभव प्रदान कर सकते हैं ।

आप स्क्रॉल करने के लिए प्रतिसाद शीर्ष लेख क्यों लिखना चाहिए

वहां कई लोग है जो हमेशा उपयोगकर्ता के लिए शीर्षक और नेविगेशन पट्टी दिखाना चाहते हैं, स्क्रीन के ऊपर 100px अंतरिक्ष के एक बहुत से कम, लोगो और अपनी साइट पर ब्लॉग के मेनू, आदि यह ज्यादा डेस्कटॉप स्क्रीन पर बात नहीं कर सकते हैं । हालांकि, औसत पर, जो ऊर्ध्वाधर आकार 600px नहीं है मोबाइल उपयोगकर्ताओं को हमेशा स्क्रीन के एक छठे की एक ंयूनतम द्वारा अस्पष्ट (अपने ब्राउज़र के नेविगेशन पर विचार कर रहे हैं, लेकिन यह भी बारे में 1/3 ~ 1/4), उपयोगकर्ता छिपा नहीं कर सकते है या नियंत्रण काफी हिंसक है (?) परेशानी.

इसकी वजह से आपको अपनी सुविधानुसार या नेविगेशन (व्यक्तिपरक सोच के साथ) के लिए जवाब देना चाहिए और हमेशा स्क्रीन के शीर्ष पर हैडर रखना चाहिए । यदि आप चाहते है कि हमेशा लागू किया गया कोई शीर्ष लेख, शीर्ष लेख अदृश्य हो जाता जब उपयोगकर्ता स्क्रॉल या सामग्री को छूता है यदि आप सामग्री को पढ़ने या एक मेनू लिखने के लिए चाहते हैं, या नेविगेशन समारोह का उपयोग करने के लिए स्क्रॉल या स्क्रीन को छूने के लिए, तो आप एक हैडर है कि फिर से प्रकट होता है को लागू करने की जरूरत है (बेशक, यह दृष्टिकोण जो उपयोगकर्ताओं को फिर से ऊपर देखना चाहते है के लिए असुविधाजनक हो सकता है) । यदि आप इस व्यक्तिगत रूप से लागू नहीं जा रहे हैं, हम अनुशंसा करते है कि आप सिर्फ स्थिति का उपयोग नहीं: फिक्स्ड ।

3 कदम एक हैडर है कि स्क्रॉल करने के लिए प्रतिक्रिया बनाने के लिए

स्क्रॉल करने के लिए प्रतिसाद शीर्ष लेख बनाने के लिए कई तरीके हैं । लेकिन वेब मानक है कि किसी भी वातावरण में व्यक्त कर रहे है पर विचार, मैं jquery का उपयोग करने की सिफारिश की बजाय सीएसएस जैसे तरीकों का उपयोग करें । Gkkmon (जाग) लेकिन यह भी जावास्क्रिप्ट या jQuery का उपयोग करने की कोशिश नहीं (क्योंकि यह अधिक गति या संसाधनों के संदर्भ में बुनियादी कार्यों का उपयोग करने से अंतराल की संभावना है) । शीर्षक है कि पुस्तक के प्रति प्रतिक्रिया है, क्योंकि jQuery विधि प्रदर्शन काफी त्याग के बिना महान वेब मानकों को दिखाया गया है ।

jquery 1 का उपयोग क
रें । आयात JQuery प्लगइन ।
2. तुम एक स्क्रिप्ट की घोषणा के लिए आयातित JQuery प्लग द्वारा इस्तेमाल किया जाएगा ।
3. आप HTML, PHP, और सीएसएस को छूने की जरूरत है ।

लोड हो रहा है JQuery प्लग में

हेडर कि स्क्रॉल करने के लिए जवाब बनाने के लिए प्लगइन jquery- -8 संस्करण है । इस प्लगइन लोड करने के लिए

<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>

, आप इस विधि का उपयोग कर सकते हैं क्योंकि संस्करण के पीछे एक मिनट है, जो एक ही कोड है, लेकिन आप और अधिक जल्दी से स्थान को हटाने और इतने पर लोड करने के लिए अनुमति देता है ।

आयातित JQuery प्लग में लिपियों की घोषणा में

प्लग-इन को कॉल करने के बाद, आपको यह घोषित करना होगा कि आप किस स्क्रिप्ट का उपयोग करना चाहते हैं ।

<script></script>
$ (फ़ंक्शन {) {
    var lastscrolltop = 0,
        डेल्टा = 15;
    $ (window). स्क्रॉल (फ़ंक्शन (इवेंट) {
        var st = $ (यह). ScrollTop ();
        यदि (मठ. Abs (Lastscrolltop-ST)<= delta) return; delta)=""></= delta) return;>
        यद ((St > Lastscrolltop) व & (Lastscrolltop-0))) {
            $ ("तत्व का नाम"). CSS ("शीर्ष", "-छुपाएं ऊंचाई");
        के अलावा
            $ ("तत्व का नाम"). CSS ("शीर्ष", "0px");
        }
        Lastscrolltop = st;
    });
});  

उस तत्व का वर्ग या ID रखें जिसे आप तत्व नाम में नियंत्रित करना चाहते हैं । आमतौर पर डाल कहा. हेडर । आप को छिपाने के लिए तत्व की ऊंचाई या उच्चतर निर्धारित करना चाहिए, क्योंकि यह छिपा जब-पिक्स प्रकाश के साथ स्क्रीन उड़ा देंगे । ऊँचाई: यदि आप 50px वर्ग का नाम नियंत्रित करना चाहते हैं. शीर्ष लेख

<script></script>
$ (फ़ंक्शन {) {
    var lastscrolltop = 0,
        डेल्टा = 15;
    $ (window). स्क्रॉल (फ़ंक्शन (इवेंट) {
        var st = $ (यह). ScrollTop ();
        यदि (मठ. Abs (Lastscrolltop-ST)<= delta) return; delta)=""></= delta) return;>
        यद ((St > Lastscrolltop) व & (Lastscrolltop-0))) {
            $ (". header"). CSS ("Top", "-50px");
        के अलावा
            $ (". header"). CSS ("Top", "0px");
        }
        Lastscrolltop = st;
    });
});  

. इस स्क्रिप्ट की सामग्री है, "यदि स्पर्श या माउस स्क्रॉल का पता लगाता है कि स्क्रीन के नीचे है, यह. header-50px के सीएसएस शीर्ष बदलने का मतलब है, और 0px के लिए. header. शीर्षक के सीएसएस ऊपर बदल जब स्क्रॉल ऊपर है."

सीएसएस तत्वों की शैली निर्दिष्ट करता है, और शीर्ष स्थिति संपत्ति द्वारा निर्दिष्ट तत्व की स्क्रीन के ऊपर से स्थिति को निर्दिष्ट करता है । दूसरे शब्दों में, परदे के ऊपर 0px और-50px आगे-पीछे जाने के लिए.

बदलें सीएसएस jquery के साथ स्क्रिप्ट मैच के लिए

अंत में, आप jQuery सेटिंग्स के अनुसार सीएसएस बदल सकते हैं ।

<style></style>
शीर्ष लेख
स्थिति: स्थिर;
/* स्थिति: तय * के साथ फिक्स/
Z-सूचकांक: 20;
/* सेट उचित z-सूचकांक क्योंकि यह अंय तत्वों द्वारा अस्पष्ट किया जा सकता है */
चौड़ाई: १००%;
/* स्क्रीन १००% क्षैतिज आकार और */
ऊंचाई: 50px;
/* 50px के एक शीर्षक खड़ी * बनाएं/
बॉक्स का आकार घटाने: सीमा-बॉक्स;
संक्रमण: सभी ०.२ s आराम; 
/* गायब हो जाता है जब यह प्रतीत होता है और प्रभाव है कि यह चिकनी लग रहा है देता है, कोई * डाल की जरूरत है/
-Webkit-संक्रमण: सभी ०.२ एस आराम;
-Moz-संक्रमण: सभी ०.२ एस आराम;
-O-संक्रमण: सभी ०.२ एस आराम;
}

सभी तीन के साथ, हम स्क्रॉल करने के लिए प्रतिक्रिया और एक महान शीर्षक है कि ऐसा लगता है बना सकते है गायब हो जाता है ।

समाप्त कोड

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

<script></script>
$ (फ़ंक्शन {) {
    var lastscrolltop = 0,
        डेल्टा = 15;
    $ (window). स्क्रॉल (फ़ंक्शन (इवेंट) {
        var st = $ (यह). ScrollTop ();
        यदि (मठ. Abs (Lastscrolltop-ST)<= delta) return; delta)=""></= delta) return;>
        यद ((St > Lastscrolltop) व & (Lastscrolltop-0))) {
            $ (". header"). CSS ("Top", "-50px");
        के अलावा
            $ (". header"). CSS ("Top", "0px");
        }
        Lastscrolltop = st;
    });
});  


<style></style>
शीर्ष लेख
स्थिति: स्थिर;
Z-सूचकांक: 20;
चौड़ाई: १००%;
ऊंचाई: 50px;
बॉक्स का आकार घटाने: सीमा-बॉक्स;
संक्रमण: सभी ०.२ s आराम; 
-Webkit-संक्रमण: सभी ०.२ एस आराम;
-Moz-संक्रमण: सभी ०.२ एस आराम;
-O-संक्रमण: सभी ०.२ एस आराम;
}

यदि आप इसे सेट के रूप में वर्णित है, तो आप आसानी से एक उच्च गुणवत्ता हेडर है कि एक महान प्रयोक्ता अनुभव प्रदान कर सकते हैं । यह एक बड़ी बात नहीं है, तो चलो इसे अपनी साइट या ब्लॉग 24/7 के लिए ठीक है, एक अस्थाई शीर्षक के लिए हमेशा । मुझे पता है कि मैं साइट से परिचित हूं, हेडर हमेशा तय है और स्क्रीन की तरह ' उपकरण पट्टी ', क्योंकि यह उपयोगकर्ता सबसे खराब उपयोगकर्ता अनुभव देता है ।