के नीचे पहुंचता है। वर $साइडबार = $('#मैप'), $विंडो = $(विंडो), ऑफसेट = $साइडबार.ऑफसेट(), टॉपपैडिंग = 15; $window.scroll(फ़ंक्शन() { अगर ($window.scrollTop() > ऑफसेट.टॉप) { $साइडबार.स्टॉप().एनिमेट({ मार्जिनटॉप: $window.scrollTop() - ऑफसेट.टॉप टॉपपैडिंग }); } अन्य { $साइडबार.स्टॉप().एनिमेट({ मार्जिनटॉप: 0 }); } }); });

समस्या का समाधान

$(function() {

    var $sidebar   = $("#map"),
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top   topPadding
            });
        }
        else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
});

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

$(window).scroll(function() {
    var scrollVal = $(this).scrollTop();
    if ( scrollVal > offset.top) {
        $sidebar.css({
           'margin-top': (($window.scrollTop() - offset.top)   topPadding)   'px'
                       //added  'px' here to prevent old internet explorer bugs
        });
    } else {
        $sidebar.css({'margin-top':'0px'});
    }
});

इसके अतिरिक्त, अपनी गणना के भीतर एकाधिक if else कथनों का उपयोग करने से बचें, क्योंकि इससे टकराव भी हो सकता है।

$(function() {

    var $sidebar   = $("#map"),
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top   topPadding
            });
        }
        else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
});

वैकल्पिक दृष्टिकोण

के लिए ऐसे परिदृश्य जहां लक्ष्य एक विशिष्ट स्क्रॉल स्थिति पर नेविगेशन तत्व को ठीक करना है, निम्नलिखित पर विचार करें दृष्टिकोण:

$(document).ready(function() {
   $(विंडो).स्क्रॉल(फ़ंक्शन() {
       var हेडरH = $('.हेडर').outerHeight(true);
      //यह बॉर्डर, मार्जिन, पैडिंग के साथ हेडर की पूरी ऊंचाई की गणना करेगा
       कंसोल.लॉग(हेडरएच);
       var स्क्रॉलवैल = $(यह).स्क्रॉलटॉप();
        अगर (स्क्रॉलवैल > हेडरएच) {
        //जब स्क्रॉल मान आपके चयनकर्ता तक पहुंचता है
            $('#subnav').css({'position':'fixed','top' :'0px'});
        } अन्य {
            $('#subnav').css({'position':'static','top':'0px'});
        }
    });
 });
पूर्व>