jQuery Waypoints का प्रयोग करके एक स्टिकी नेविगेशन हैडर बनाएं

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

इस ट्यूटोरियल में, हम एक नेविगेशन बार बनाएंगे जो आपके साथ ही रहेगा जब आप नीचे की ओर स्क्रॉल करते हैं - और हम भी इसे ढंकने के लिए एक या दो डिमिक्स को एक मिश्रण में डाल देंगे।

पुनर्प्रकाशित ट्यूटोरियल

हर कुछ सप्ताहों में, हम साइट के पूरे इतिहास में से कुछ हमारे पाठक की पसंदीदा पोस्ट की समीक्षा करते हैं। यह ट्यूटोरियल पहले मार्च 2012 में प्रकाशित हुआ था।

परिचय

"हर कोई रिबन पसंद करता है" Chris Coyier का कहना है जब :before और :after सूडो-एलिमेंट्स के गुणों पर चर्चा होती है। मैंने इन स्टाइलिश, ट्रायंगल-एज वाले रिबन को इंटरनेट पर चारो तरफ देखा है (एक प्रमुख उदाहरण है फेसबुक का परिचय टाइमलाइन पेज) और, जब तक उनकी एक निश्चित अपील है, मुझे यह स्वीकार करना होगा कि वे जो स्थानिक प्रभाव बनाते हैं, मुझे सही नहीं लगता।

रिबन एक कारण के लिए पसंद किया जाता है, हालांकि - वे अधिकतर फ्लैट डिजाइन प्रतिमान (paradigm) को तोड़ते हैं कि हम परंपरागत रूप से बाध्य हैं, और वे कुछ विसुअल एलिमेंट्स में से एक हैं जो एक अनोखे तरीके से ऐसा करते हैं। लेकिन, जैसा कि पुरानी कहावत है, एक बिल्ली को त्वचा बनाने के लिए एक से अधिक तरीके होने चाहिए - इसलिए, इस ट्यूटोरियल में, मैं ऐसे एलिमेंट्स के लिए एक वैकल्पिक विसुअल स्टाइल का प्रस्ताव दूंगा, जो मुझे अधिक प्राकृतिक दिखते हैं और सुंदरता मनभावन होते हैं। मुझे आशा है कि आप इसे पसंद करेंगे और इसका अच्छा उपयोग करेंगे!

हम क्या करेंगे

इस ट्यूटोरियल में, हम HTML5 के नए एलिमेंट्स में से एक, nav टैग, लिंक की हॉरिजॉन्टल लिस्ट के कंटेनर के रूप में उपयोग करने जा रहे हैं। मैं संक्षेप में बताऊंगा कि CSS का थोड़ा सा उपयोग करके इसे सुंदर कैसे दिखाना है।

सबसे महत्वपूर्ण बात, आप अपने आप को jQuery के Waypoints प्लगइन की बेसिक बातों से परिचित करा लेंगे, जो एडवांस फंक्शनलिटी प्रदान करेंगे: जैसे यूजर नीचे की ओर स्क्रॉल करता है, नेविगेशन बार व्यूपोर्ट के शीर्ष पर चिपक जायेगा, साथ ही करंट सेक्शन को इंडीकेट करने के लिए बदल जाएगा। थोड़ा स्पर्श जोड़ने के लिए, हम एक और प्लगइन, ScrollTo का उपयोग करेंगे ताकि जब यूजर नेविगेशन लिंक्स को क्लिक करता है तो स्मूथ स्क्रॉलिंग और सुविधाजनक पोजीशनिंग दिया जा सके।

स्टेप 1: द बॉक्स

मुझे यकीन है कि आप HTML5 के साथ आये विभिन्न नए एलिमेंट्स से परिचित हैं। इस उदाहरण में हम उनमें से दो का उपयोग करने जा रहे हैं: <nav> और <section>। हम निम्नलिखित के साथ शुरू करने जा रहे हैं:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class=wrapper>
      <h1>A reasonably large heading.</h1>
      <nav><!-- Navigation. --></nav>
      <section id="section-1">Lorem ipsum ...</section>
      <!-- Type in some longer sections of sample text here. -->
    </div>
    <!-- Scripts will go here. -->
  </body>
</html>

हम अपने नेविगेशन बार को एक स्पष्ट चौड़ाई देंगे। इसे wrapper से 28px वाइड बनाएं, और इसे नकारात्मक लेफ्ट मार्जिन के साथ जगह में दबाएं। आइए इसे बॉर्डर के ऊपरी-किनारों को border-*-radius के साथ गोल किया जाए, साथ ही कुछ मनचाही पैडिंग भी।

nav {
  position: relative;
  width: 928px;
  padding: 2em;
  margin-left: -14px;
  border-top-left-radius: 14px 7px;
  border-top-right-radius: 14px 7px;
}

इसके बाद, हम नेविगेशन बार के अंदर लिंक की एक unordered लिस्ट जोड़ते हैं, और इसके आइटम्स को display: inline-block करें ताकि यह सब एक ही लाइन में आ जाएं। हमें किसी भी बुलेट की ज़रूरत नहीं है, इसलिए हम मिक्स में list-style: none भी कर देंगे।

<nav>
  <ul>
    <li><a class=nav-link href=#section-1>Section 1</a></li>
    <li><a class=nav-link href=#section-2>Section 2</a></li>
    ...some more list items...
  </ul>
</nav>

nav li {
  display: inline-block;
  list-style: none;
}

अब तक, आपके पास कुछ ऐसा होना चाहिए:

स्टेप 2: किनारों

अब, यदि केवल CSS हमें मल्टीप्ल सूडो-एलिमेंट्स की अनुमति देता (अर्थात ::after::after), तो हम आसानी से नेविगेशन बार के गोलाकार किनारों को एक अर्थपूर्ण तरीके से पूरा कर सकते थे। लेकिन हम ऐसा नहीं कर सकते, इसलिए हमें nav के अंत में दो गैर सिमेंटिक divs जोड़ने होंगे। इन्हे nav-left और nav-right नाम की क्लास दें (या आप उन्हें कुछ कल्पनाशील नाम दे सकते हैं, जैसे कि Castor और Pollux)। वे 14px चौड़े 14px लम्बे हैं, और nav के निचले अंत से 14px absolutely positioned हैं।

जैसा कि ऊपर देखा गया है, प्रॉपर्टी की border-radius फॅमिली प्रत्येक कोने के लिए दो वैल्यू ले सकती हैं। वे एलिमेंट की चौड़ाई के परसेंट भी हो सकते हैं, जो काफी आसान है — इस एप्रोच से बॉर्डर के रेडियस बॉक्स के डायमेंशन में परिवर्तन के साथ स्वतः अनुकूल हो जाता है।

छोटी "shadows" जो नेविगेशन बार के रिबन के लुक को पूरा करते हैं ::after सूडो-एलिमेंट्स का उपयोग करके बनाये हैं। उनकी चौड़ाई और ऊंचाई, साथ ही उनकी बॉर्डर रेडियस, भी प्रतिशत का उपयोग करके सेट की जाती हैं।

/* swap ‘left’ with ‘right’ for the other two */

.nav-left {
  position: absolute;
  left: 0;  bottom: -14px;
  width: 14px;  height: 14px;
  background: #848a6a;
  border-bottom-left-radius: 100% 50%;
}

.nav-left::after {
  content: '';
  position: absolute;
  right: 0;
  width: 66%;  height: 66%;
  background: #000;
  border-top-left-radius: 100% 50%;
  border-bottom-left-radius: 100% 50%;
}

और हमने यहाँ पूरा कर लिया!

स्ट्रैट एज वाले रिबन के असंभव ज्यामिति से छुटकारा पाने के बाद, चलते रहें।

स्टेप 3: स्क्रिप्ट

फ्लोटिंग हेडर प्रभाव को प्राप्त करने के लिए, हम Caleb Troughton द्वारा, Waypoints नामक jQuery प्लगइन का उपयोग करेंगे। इसका एकमात्र उद्देश्य इवेंट्स को ट्रिगर करना है, जब यूजर किसी विशेष एलिमेंट को स्क्रॉल करता है। जैसा कि आप देखेंगे, यह बेहद सरल है, फिर भी बहुत सारा लचीलेपन प्रदान करता है - आप इसके होमपेज पर कई उदाहरण देख सकते हैं।

अपने पेज में jQuery और Waypoints को शामिल करें, और चलो शुरू करो!

पहली चीज जिसकी आपको जरूरत है वह है की एलिमेंट पर .waypoint() मेथड की मदद से waypoint को रजिस्टर करना। बेशक, यह खुद से कुछ भी नहीं करता है - आपको ईवेंट में एक हैंडलर फ़ंक्शन को परिभाषित करना होगा। ऐसा करने का सबसे आसान तरीका यह है कि फ़ंक्शन को पैरामीटर के रूप में .waypoint() में पास करें।

इसे अभी आज़माएं: अपनी स्क्रिप्ट में निम्नलिखित को जोड़ें और आप देखेंगे कि नेविगेशन जैसे ही स्क्रॉल होकर जैसे ही आप नीचे आते हैं तो एक मैसेज पॉप अप होता है।

$(function() {                     // When the page has loaded,
  $('nav').waypoint(               // create a waypoint
    function() {
      alert("Waypoint reached.");
    }
  )
});

अब, हमारे वांछित प्रभाव को प्राप्त करने के लिए, चीजें जरूर थोड़ा और अधिक जटिल हो जाएंगी। सबसे पहले, हमें एक कंटेनर में हमारे नेविगेशन बार को एनक्लोस करना होगा, जो हमारा वास्तविक waypoint होगा, और एक सुविधाजनक प्लेसहोल्डर के रूप में कार्य करेगा (इसके बारे में और अधिक नीचे मिलेगा)।

<div class="nav-container">
  <nav>
    ...
  </nav>
</div>

आपके CSS में, निम्नलिखित CSS नियम बनायें। (जब आप उस पर होते हैं, तो किसी भी वर्टीकल मार्जिन को स्थानांतरित करें, जिस पर nav के लिए nav-container हो सकता है)

.sticky {
  position: fixed;
  top: 0;
}

और हम अच्छे हिस्से के लिए तैयार हैं! अपनी स्क्रिप्ट के कंटेंट को निम्न में बदलें:

$(function() {

  // Do our DOM lookups beforehand
  var nav_container = $(".nav-container");
  var nav = $("nav");

  nav_container.waypoint({
    handler: function(event, direction) {
        nav.toggleClass('sticky', direction=='down');
    }
  });

});

ठीक है, यह सब कहाँ से आया है, आप सही पूछते हैं। वेल, आपको शायद पता चल गया होगा कि हम nav-container में एक waypoint को जोड़ रहे हैं; केवल इस समय, हम इसे अलग तरीके से कर रहे हैं। सीधे हैंडलर फ़ंक्शन को .waypoint() में डालने के बजाय, हम इसे एक ऑब्जेक्ट में encapsulate कर रहे हैं। अपने आप से, इसमें कोई फर्क नहीं पड़ता है: दोनों एक ही बात करने के पूरी तरह वैध तरीके हैं। जिस ऑब्जेक्ट को हम पास कर रहे हैं, हालांकि, इसमें कई अन्य ऑप्शंस वैल्यू शामिल हो सकती हैं — इसलिए इसे अभी प्रयोग करना बाद में अधिक कंसिस्टेंट कोड को बनाएगा।

हम डिफाइन किये गए हैंडलर फ़ंक्शंस दो पैरामीटर्स को प्राप्त करते हैं: पहला एक स्टैण्डर्ड jQuery event ऑब्जेक्ट है, जो कि यहां बहुत ही कम रुचि का है। दूसरा ख़ास तौर पर waypoint के लिए है: यह एक स्ट्रिंग है जिसका मूल्य या तो 'down' या 'up' हो सकती है यह इस बात पर निर्भर करता है की यूजर किस तरफ स्क्रॉल कर रहा है जब यह waypoint तक पहुंचा।

अब यह जानना कि यूजर किस तरह से जा रहा है, यह जानकारी का एक बहुत ही महत्वपूर्ण हिस्सा है, क्योंकि यह हमें दोनों दिशाओं में अलग-अलग व्यवहार एक्सेक्यूट करने की अनुमति देता है। हेन्डलर फ़ंक्शन की बॉडी में, हम jQuery के अपेक्षाकृत कम ज्ञात वैरिएंट .toggleClass() मेथड का उपयोग कर रहे हैं, जो एक उपयोगी shorthand बनाता है: इस सिंटेक्स में, दूसरा पैरामीटर यह निर्धारित करता है कि क्लास को टारगेट एलिमेंट में जोड़ा जाएगा या नहीं या इसे से निकाल दिया जाएगा। जब यूजर स्क्रॉल करता है, तो एक्सप्रेशन direction==='down' का मूल्यांकन true है, इसलिए हमारे नेविगेशन बार sticky क्लास प्राप्त करता है, और व्यूपोर्ट के शीर्ष पर चिपक जाता है। जैसे ही यूजर फिर से वापस ऊपर स्क्रॉल कर लेता हैं, क्लास को नेविगेशन बार से हटा दिया जाता है, जो उसके स्थान पर वापस आता है। इसे अभी आज़माएं।

कूल हुह? हालांकि, यदि आप धीरे-धीरे स्क्रॉल करते हुए waypoint को पार करते हैं, जिसे आपने अभी बनाया है, तो आप शायद ध्यान देंगे कि जैसे ही आप इससे पास होते हैं कंटेंट फ्लो से नेविगेशन बार के निकल जाने की वजह से कंटेंट "jump" करता हैं। बहुत ढीला दिखने के अलावा, ऐसा बिहेवियर संभवतः आपके कंटेंट का हिस्सा अस्पष्ट कर सकता है और उपयोगिता को खराब कर सकता है। शुक्र है, इन सब के लिए आसान उपाय है - आपके हैंडलर फ़ंक्शन में निम्न कोड जोड़ने से कंटेंट का कूदना रुक जाता है।

if (direction == 'down')
  nav_container.css({ 'height':nav.outerHeight() });
else
  nav_container.css({ 'height':'auto' });

यहां पर जो हो रहा है काफी जाहिर तौर पर है: हम उपरोक्त बताए अनुसार प्लेसहोल्डर के रूप में nav-container का उपयोग करते हैं। जब हम नीचे स्क्रॉल करते हैं, तो हम इसकी ऊंचाई को बड़ा देते हैं, और नीचे का कंटेंट अपनी जगह पर रहता है। हांलांकि, यहाँ एक उलझन है - जैसा यह है वैसे ही काम करने के लिए, किसी भी वर्टीकल मार्जिन जिसे आप नेविगेशन बार के आस-पास लेना चाहते हैं, को nav-container पर अप्लाई किया जाना चाहिए, न कि nav पर।

तो यह है! हमें एक अच्छा फिक्स्ड नेविगेशन बार मिल गया है, जैसे कई अन्य साइट पहले से ही करते हैं। शो खत्म हो गया, folks...

…या यह है? खैर, अभी भी एक या दो ट्रिक्स है जिन्हे आप देखना चाहते हैं, और जो आपको पैक के आगे रख सकता हैं। यदि यह मामला है, तो आगे पढ़ें।

स्टेप 4: वर्टीकल ऑफसेट

यदि आप इसके बारे में सोचते हैं, तो ऐसे कई मामले हैं जहां एक ईवेंट ट्रिगर होता है जब कोई एलिमेंट ब्राउज़र व्यूपोर्ट के एकदम किनारे पर पहुंचता है तो क्या आप यह करना चाहते हैं। सौभाग्य से, Waypoints इसके लिए एक सुविधाजनक ऑप्शन प्रदान करता हैं: offset। यहां है की यह कैसा दिखता है:

nav.waypoint( {
  handler: …,
  offset: 50
} )

offset आपको एलिमेंट के ऊपर से वेरिएबल दूरी पर वास्तविक waypoint को बनाने की अनुमति देता है। एक पॉजिटिव वैल्यू waypoint को ट्रिगर करता है जब एलिमेंट का शीर्ष व्यूपोर्ट के शीर्ष के नीचे निर्दिष्ट दूरी पर होता है, और एक नेगेटिव वैल्यू waypoint को ट्रिगर करता है, जब वह एलिमेंट व्यूपोर्ट के ऊपर से भी ऊपर होता है (यानी यूजर ने स्क्रॉल करके इसे काफी पार कर लिया है )।

ऑफ़सेट की वैल्यू एक नंबर हो सकती है (जो पिक्सल के फिक्स्ड अमाउंट को रिप्रेजेंट करता है), एक स्ट्रिंग भी जो सकती है जिसमें प्रतिशत दिया गया हो (व्यूपोर्ट की ऊँचाई के प्रतिशत के रूप में व्याख्या करता है), या एक ऐसा फ़ंक्शन जो पिक्सेल्स की संख्या को रीटर्न करता है। आखिरी वाला कुछ फ्लेक्सिबिलिटी प्रदान कर सकता हैं, और हम इसका बाद में कुछ उपयोग करेंगे। अभी के लिए, हम फिक्स्ड वैल्यूज पर ही रहते हैं और देखते हैं कि वे किसके लिए अच्छे हैं।

पहली चीज जो मन में आती है वो है स्टिकी एलिमेंट के ऊपर कुछ स्पेस जोड़ना। offset वैरिएबल का उपयोग करके, यह आसान है: शीर्ष से 15-पिक्सेल offset के लिए, offset:15px को .waypoint() के ऑप्शन में जोड़े, और .sticky CSS रूल में top:0px को top:15px पर बदलें।

यदि आपका डिज़ाइन इसके लिए कॉल करता है, तो नेविगेशन बार के ऊपर एक छोटा सा ग्रेडिएंट भी एक अच्छा स्पर्श हो सकता है। इसे आसानी से nav के अंदर एक और div को जोड़कर और थोड़ी सी CSS को लिखकर आसानी से पूरा किया जा सकता है:

.sticky .nav-above {
  position: absolute;
  top:-15px;
  left:1em;
  right:1em;
  height:15px;
  background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
  /* add cross-browser gradient code as needed */
}

थोड़ा सा ध्यान देना इन सरल डिजाइनों में अच्छी तरह से काम करेगा।

स्टेप 5: ऑफसेट फ़ंक्शन

एक बात जिसे Caleb ने सोच-समझकर Waypoints में शामिल किया है, वह है की waypoint के offset को डायनामिक तरीके से जेनेरेट करना, जैसे की:

nav.waypoint( {
  handler: …,
  offset: function() {
    return —(nav.outerHeight()+50);
  }
} )

यह हमें एक हैंडलर रखने की अनुमति देता है जो तब ट्रिगर होगा जब यूजर एलिमेंट के नीचे पहले से ही 50px पार कर चूका होगा, बिना यह जानने की जरूरत के कि इसकी ऊंचाई कितनी है।

नोट: ऐसी प्रक्रियात्मक रूप से (procedurally) उत्पन्न ऑफसेट्स (साथ ही प्रतिशत में दिए गए), हर बार विंडो के रीसाइज होने पर रीकैलकुलेट किया जाता है, नए waypoints को जोड़ दिया जाता है, या एक waypoint के ऑप्शंस को मॉडिफाई किया जाता हैं। यदि आप कुछ और कर रहे हैं जो waypoints की स्थिति (जैसे डोम या पेज लेआउट को बदलना) को प्रभावित कर सकता है, तो पोजीशन के रीकैलकुलेट होने के बाद $.waypoints('refresh') को जरूर कॉल करें।

हमारे ट्यूटोरियल के संदर्भ में, इस फंक्शनलिटी का उपयोग शीर्ष से आसानी से नेविगेशन बार को स्लाइडिंग कराना है। तैयार रहें - नीचे दिए गए कोड अब तक के सबसे बड़े कोड का हिस्सा है। हांलांकि इसमें कुछ भी ऐसा नहीं है जिसके बारे में आप पहले से परिचित नहीं है, तो यह है:

var top_spacing = 15;
var waypoint_offset = 50;

nav_container.waypoint({

  handler: function(event, direction) {

    if (direction == 'down') {

      nav_container.css({ 'height' : nav.outerHeight() });
      nav.addClass("sticky")
         .stop()
         .css("top", -nav.outerHeight())
         .animate({"top" : top_spacing});

    } else {

      nav_container.css({ 'height' : 'auto' });
      nav.removeClass("sticky")
         .stop()
         .css("top", nav.outerHeight() + waypoint_offset)
         .animate({"top" : ""});

    }

  },

  offset: function() {
    return &mdash;(nav.outerHeight() + waypoint_offset);
  }

});

बहुत गन्दा नहीं है! यह सब jQuery के स्टैण्डर्ड है: जैसे ही हम nav में sticky क्लास को जोड़ते या हटते हैं, हम एलिमेंट की वर्टीकल पोजीशन को .css() का उपयोग करके ओवरराइड करते हैं, और फिर इसे .animate() करते हैं जैसा यह होना चाहिए। .stop() jQuery के ईवेंट queue को साफ़ करके संभावित बग (bugs) को रोकता है।

हांलांकि, इसका थोड़ा साइड इफेक्ट है - जब कोड ठीक से नेविगेशन एलिमेंट की वर्टीकल पोजीशन पर जाता है, तो आप top:15px कि डिक्लेरेशन को अपनी CSS पर भी छोड़ सकते हैं। यदि आप एक बड़े प्रोजेक्ट का हिस्सा हैं, अलग अलग लोगो के साथ जो डिज़ाइन और फ्रंट-एंड स्क्रिप्टिंग पर काम कर रहे हैं, यह एक समस्या को पैदा कर सकता है क्योंकि ऐसे हैक्स कि राह खोना आसान है। बस आपको बताने के लिए, एक प्लगिन मौजूद हैं - जैसे Ariel Flesler का उत्कृष्ट jQuery.Rule जो स्क्रिप्ट और स्टाइलशीट के बीच की खाई को भरने के लिए इस्तेमाल किया जा सकता है। आपको यह खुद तय करना होगा कि आपको इस तरह के किसी प्लगइन कि जरूरत है या नहीं।

आप निश्चित रूप से इसके बजाय CSS के @keyframes से भी इसी के समान इफ़ेक्ट प्राप्त कर सकते हैं, लेकिन उसके लिए बहुत कम सपोर्ट है (और बहुत सारे वेंडर प्रीफिक्स भी), वे कम फ्लेक्सिबल हैं, और "up" एनीमेशन एक बड़ा no no होगा। चूंकि हम प्रगतिशील वृद्धि का ट्रैक नहीं छोड़ रहे हैं, इसलिए jQuery की मजबूत फंक्शनलिटी के साथ न रहने का कोई कारण नहीं है।

स्टेप 6: हाइलाइटिंग और स्मूद स्क्रॉलिंग

आपको यह जरूरत महसूस हो सकती है की हाईलाइट किये गए आइटम को बदला जाए जैसे जैसे पाठक आपके पेज के अलग अलग सेक्शन को पार करता है। Waypoints के साथ, यह हासिल करना काफी आसान है। आपको अपनी स्क्रिप्ट में निम्नलिखित को जोड़ना होगा:

$(function() {
  …
  // copy from here…

  var sections = $('section');
  var navigation_links = $('nav a');
 
  sections.waypoint({
    handler: function(event, direction) {
      // handler code
    },
    offset: '35%'
  });

  // …to here
});

इस बार हम विंडो की ऊंचाई के प्रतिशत के रूप में ऑफसेट का उपयोग कर रहे हैं। प्रभावी रूप से, इसका मतलब है कि काल्पनिक रेखा जो हमारी स्क्रिप्ट को बताता है कि वर्तमान में किस सेक्शन को देखा जा रहा है, व्यूपोर्ट के शीर्ष से तीसरे स्थान पर रखी गयी है - बिलकुल उस जगह जहाँ पाठक लम्बे टेक्स्ट को पड़ते समय देख रहा है। एक अधिक मजबूत समाधान एक ऐसे फंक्शन का प्रयोग करना हो सकता है जो नेविगेशन बार की ऊंचाई में परिवर्तनों के अनुसार इसे अपनाता है।

हांलांकि वो कोड जो हम अपने हैंडलर फ़ंक्शंस में उपयोग करने जा रहे हैं वह थोड़ा कम सेल्फ-एक्सप्लनेटोरी (explanatory) है। यह यहाँ है:

      var active_section;
      active_section = $(this);
      if (direction === "up") active_section = active_section.prev();

      var active_link = $('nav a[href="#' + active_section.attr("id") + '"]');
      navigation_links.removeClass("selected");
      active_link.addClass("selected");

सबसे पहले, हमें यह जानना होगा कि वर्तमान में कौन सा सेक्शन देखा जा रहा है। अगर हम नीचे स्क्रॉल कर रहे हैं, तो वो सेक्शन जिससे waypoint सम्बंधित है वो वही है जो एक्टिव हो जाता है। एक waypoint को पार करते हुए स्क्रोलिंग करना, हालांकि, इसका मतलब यह है कि यह पिछले सेक्शन होगा जिसे व्यू में लाया जाएगा - इसलिए हम इसे सेलेक्ट करने के लिए .prev() का उपयोग करते हैं। इसके बाद, हम नेविगेशन बार के सभी लिंक्स से selected क्लास को निकाल देते हैं, जो वर्तमान में एक्टिव सेक्शन की id जो href एट्रिब्यूट से सम्बंधित है उसे री-अप्लाई करने से पहले।

यह बहुत अच्छी तरह से काम करता है; अगर आप क्लासेज को जोड़ने और निकालने से आगे बढ़ना चाहते हैं, तो आप प्लग-इन जैसे कि LavaLamp को देखना चाहेंगे।

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

  navigation_links.click( function(event) {

    $.scrollTo(
      $(this).attr("href"),
      {
        duration: 200,
        offset: { 'left':0, 'top':-0.15*$(window).height() }
      }
    );

  });

(ज़ाहिर है, उस कोड को अंतिम कर्ली ब्रेस से ऊपर जाता है!)

यद्यपि क्लिक इवेंट पर एक फंक्शन को बाइंड करने के बेहतर तरीके भी हैं, हम सबसे आसान के साथ ही रहेंगे: .click()। .scrollTo() मेथड को ऐसे तरीके से कॉल किया जाता है जो कि .waypoint() के जैसा ही है। यह दो पैरामीटर्स को लेता है - एक स्क्रॉल टारगेट और एक ऑब्जेक्ट जिसमें विभिन्न ऑप्शंस होते हैं, जो कि, इस मामले में, काफी आत्म व्याख्यात्मक (self explanatory) हैं। क्लिक किए गए लिंक का href एट्रिब्यूट एक स्क्रॉल टारगेट के रूप में अच्छी तरह से काम करती है, और टॉप ऑफसेट के रूप में इस्तेमाल किया जाने वाला एक्सप्रेशन टारगेट को व्यूपोर्ट की ऊंचाई के 15% पर लगता है।

निष्कर्ष

और ऐसा लगता है कि हमने कर लिया है। मैंने आपको उपयोगी छोटे प्लगइन Waypoints के बारे में बताया है, और हम इसके कुछ उपयोगी मामलो में गए जो आपको यह आईडिया देंगे की आप इसके साथ क्या क्या कर सकते हैं। हमारे नेविगेशन में एक अधिक सहज स्क्रॉल बिहेवियर भी हमने इम्प्लीमेंट किया है। मिक्स में कुछ Ajax डालें, और आप सहज, इमर्सिव वेब एक्सपीरियंस का निर्माण करने की दिशा में अपने रास्ते पर हैं जो वेब का भविष्य होने वाला है... तो, अधिक संभावना है कि यह थोड़ी देर में ही ट्रेंडी होगा और फिर एक आप जगह हो जाएगा, वेब के दिग्गज जिस तरह चीज़ों का इस्तेमाल करते हैं। लेकिन, चीजे ऐसे ही चलती हैं।

रिबन के लिए, उनकी सबसे बड़ी खामी यह है: वे सिर्फ एक भ्रम हैं। रिबन के किनारे वास्तव में कंटेनर के किनारों के आसपास नहीं जाते हैं; वे केवल उस तरह दिखाई देते हैं, जो काफी स्पष्ट है जब रिबन एक एलिमेंट पर जाता है जो पेज के किनारे से निकलता है।

z-index कैसे काम करता है इस वजह से, इस कनफ्लिक्ट को हल करने का कोई आसान तरीका नहीं है, इसे पहली जगह से बचने के लिए बचाएं। हालांकि, कुछ कल्पनाओं के साथ, साथ ही साथ jQuery की बेसिक नॉलेज के साथ, आप इन एलिमेंट्स को रिबन के रास्ते से बाहर जाने के लिए एक तरह से इंजीनियर हो सकते हैं क्योंकि यह उन्हें एप्रोच करता है। ऐसा करना, इस ट्यूटोरियल के दायरे से परे है, हालांकि; उम्मीद है, मैं इसे जल्दी या बाद में एक क्विक टिप के रूप में आपको दिखा सकता हूं, यहाँ या Nettuts+ पर। बने रहें!