उन्नत jQuery चिपचिपा साइडबार

Question

मैं एक (चिपचिपा) स्क्रॉल साइडबार पर काम कर रहा हूँ। समस्या यह है कि अधिकांश चिपचिपा साइडबार इस बात पर विचार नहीं करते हैं कि साइडबार लंबा हो सकता है तो व्यूपोर्ट (उदाहरण के लिए यदि टोकरी (साइडबार) में कई आइटम जोड़े जाते हैं)। जो मैं हल करने की कोशिश कर रहा हूं।

• साइडबार की ऊंचाई लम्बे तो व्यूपोर्ट है, तो यह सामग्री और div के नीचे के माध्यम से स्क्रॉल व्यूपोर्ट की तह तक चिपके रहते हैं चाहिए चाहिए जब आगे नीचे स्क्रॉल: ये आवश्यकताएं हैं ।

• तो साइडबार की ऊंचाई लम्बे तो व्यूपोर्ट है, divs नीचे केवल जब तुम पृष्ठ के तल पर हैं दिखाया जाना चाहिए।

• जब उपयोगकर्ता बैक अप लेता है, साइडबार शीर्ष पर वापस स्क्रॉल करता है और व्यूपोर्ट के शीर्ष पर वापस चिपक जाता है।

• यदि साइडबार की ऊंचाई कम है तो व्यूपोर्ट, यह स्क्रॉल होने पर शीर्ष से चिपचिपा होना चाहिए।

तो सब कुछ कुछ कार्यक्षमता में और इतना आसान नहीं (मुझे लगता है)। मैंने जो देखा है उसे मैंने सबसे करीब देखा है, यह उदाहरण है: http://demo.techbrij.com/730/fix-sidebar-scrolling-jquery.php लेकिन जिस तरह से कोड लिखा गया है वह मेरे लिए उपयुक्त नहीं है।

अब तक, इस मैं क्या कर दिया है है: DEMO

और jQuery कोड मैं प्रयोग किया है:

jQuery(document).ready(function($) { 

var $sidebar = $('.sidebar'), 
    $content = $('.content'); 

if ($sidebar.length > 0 && $content.length > 0) { 
    var $window = $(window), 
     offset  = $sidebar.offset(), 
     timer; 

    $window.scroll(function() { 
     clearTimeout(timer); 
     timer = setTimeout(function() { 
      if ($content.height() > $sidebar.height()) { 
       var new_margin = $window.scrollTop() - offset.top; 
       if ($window.scrollTop() > offset.top && ($sidebar.height()+new_margin) <= $content.height()) { 
        // Following the scroll... 
        $sidebar.stop().animate({ marginTop: new_margin }); 
       } else if (($sidebar.height()+new_margin) > $content.height()) { 
        // Reached the bottom... 
        $sidebar.stop().animate({ marginTop: $content.height()-$sidebar.height() }); 
       } else if ($window.scrollTop() <= offset.top) { 
        // Initial position... 
        $sidebar.stop().animate({ marginTop: 0 }); 
       } 
      } 
     }, 100); 
    }); 
} 

}); 

Answer 1

आप मार्जिन का उपयोग कर रहे चारों ओर चिपचिपा साइडबार ले जाने के लिए - मैं इस पाया है अपने वर्तमान पूछने (और संभावित रूप से एक भारी तरीका) को संभालने का एक मुश्किल तरीका बनना।

सामान्य तौर पर, मैं बस साइडबार यह "स्थिति: तय" हो करता है कि एक वर्ग जोड़ना चाहते यह बंद तो ब्राउज़र रखने पर भारी उठाने करता है।

के लिए अपने वर्तमान से पूछते हैं, तो आप बस उस स्थिति तय div (जो भी 100% ऊंचाई किया जाता है) प्रोग्राम के रूप में वे कितनी दूर नीचे स्क्रॉल किया है के आधार पर स्क्रॉल करने के लिए है। मेरे उदाहरण पर एक नजर डालें और यदि इस आशय है देखने के बाद आप कर रहे हैं: http://jsfiddle.net/ZHP52/1/

यहाँ

jQuery के: http://jsfiddle.net/JVe8T/7/

के लिए खेद है:

jQuery(document).ready(function($) { 

var $sidebar = $('.sidebar'), 
    $content = $('.content'); 

//Since our CSS is going to monkey with the height as you scroll, I need to know the initial height. 
var sidebarHeight = $sidebar.height(); 

if ($sidebar.length > 0 && $content.length > 0) { 
    var $window = $(window), 
     offset  = $sidebar.offset(), 
     timer; 

    $window.scroll(function() { 

     if ($content.height() > sidebarHeight) { 
      var new_margin = $window.scrollTop() - offset.top; 
      if ($window.scrollTop() > offset.top) { 
       // Fix sidebar 
       $sidebar.addClass("fixed"); 
       // Scroll it the appropriate ammount 
       $sidebar.scrollTop(new_margin);    
      }else{ 
       $sidebar.removeClass("fixed"); 
      } 
     } 
    }); 
} 

}); 

Answer 2

मैं इस belive कार्यक्षमता आप के लिए देख रहे हैं गन्दा कोड लेकिन इसे अनुकूलित करने के लिए यह काफी आसान होना चाहिए। मैं भी मान लिया है कि sidebar2 (गैर चिपचिपा एक), ऊंचाई परिभाषित किया गया है, तो वैसा तुम सिर्फ jQuery के साथ यह पता लगाने और ऑफसेट तल के लिए .css का भी उपयोग कर सकता है नहीं है।

jQuery(document).ready(function() { 

    var tmpWindow = $(window), 
     sidebar = $('.sidebar'), 
     content = $('.content'), 
     sidebar1 = $('.sidebar1'), 
     sidebar2 = $('.sidebar2'), 
     viewportHeight = $(window).height(), 
     sidebarHeight = sidebar.height(), 
     sidebar1Height = sidebar1.height(), 
     sidebar2Height = sidebar2.height(), 
     offsetBottom; 


    tmpWindow.scroll(function(){ 

     offsetBottom = content.height() - sidebar2Height; 

     //if sidebar height is less that viewport 
     if (viewportHeight > sidebarHeight) { 
      sidebar.addClass('fixed'); 
     } 

     //sticky sidebar1 
     if ((tmpWindow.scrollTop() + viewportHeight) > sidebar1Height) { 
      sidebar1.addClass('bottom'); 
     } else { 
      sidebar1.removeClass('bottom'); 
     } 

     //end of content, visible sidebar2 
     if ((tmpWindow.scrollTop() + viewportHeight) > offsetBottom) { 
      sidebar1.removeClass('bottom'); 
      sidebar1.addClass('fixedBottom'); 
     } else { 
      sidebar1.removeClass('fixedBottom'); 
     } 

    }); 

}); 

Answer 3

बाहर चेक hcSticky, मैं सिर्फ इस बात के लिए देख रहा था:

यहाँ मेरी कोड है। यह "परिपूर्ण" चिपचिपा साइडबार की तरह है और विकल्पों के साथ अन्य पुस्तकालयों का अनुकरण भी कर सकता है।

पहले प्रदर्शन यह मुख्य सामग्री से स्वतंत्र रूप से एक कंटेनर स्क्रॉल क्या हर किसी की जरूरत है शायद है। (आप पृष्ठ के नीचे तक पहुँचने से पहले पूरे साइडबार के माध्यम से जा सकते हैं या बार जब आप स्क्रॉल पेज के शीर्ष तक पहुँचने से पहले,)।

इसे जांचें: http://someweblog.com/demo/hcsticky/