] इस तरह के एक परिदृश्य में गतिशील रूप से आकार के मूल तत्व के भीतर एक तत्व की स्क्रॉलिंग रेंज को सीमित करना शामिल है। हालाँकि, मानचित्र की स्क्रॉलिंग अनिश्चित काल तक फैली हुई है, व्यूपोर्ट की ऊंचाई से अधिक है, उपयोगकर्ताओं को पृष्ठ के पाद को एक्सेस करने से रोकती है।

इसलिए। JQuery के ".animate ()" विधि का उपयोग करने के बजाय, हम प्रदर्शन कारणों के लिए प्रत्यक्ष CSS हेरफेर का विकल्प चुनते हैं। {

$ ("#मैप")। css ({{ MARGINTOP: (स्क्रॉलवल - $ ("#साइडबार")। ऑफसेट ()। टॉप) "पीएक्स" }); Margintop: "0px" }); कुछ परिदृश्य, एक वैकल्पिक दृष्टिकोण पसंद किया जा सकता है। उदाहरण के लिए, यदि मानचित्र तत्व में एक निश्चित ऊंचाई होती है और साइडबार गतिशील रूप से फैलता है, तो हम गणना को सरल बना सकते हैं। {

$ ("#मैप")। css ({{ स्थिति: "फिक्स्ड", शीर्ष: "0px" }); स्थिति: "स्थैतिक" }); }
}); जब स्क्रॉल की स्थिति हेडर की ऊंचाई से अधिक हो जाती है, तो हम नक्शे की स्थिति को व्यूपोर्ट के शीर्ष पर तय करते हैं। यह दृष्टिकोण मानचित्र को उचित समय पर देखने में स्क्रॉल सुनिश्चित करता है, जबकि व्यूपोर्ट की ऊंचाई के भीतर शेष है।