सीएसएस/जेएस में एक निश्चित/चिपचिपा साइडबार कैसे बनाएं?

Question

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

मैं इस में दो तरीकों का देखा है:

1. position:fixed;
2. डोम

दृष्टिकोण के साथ जावास्क्रिप्ट हेरफेर नहीं। 1, जहां तक ​​मुझे पता है, व्यूपोर्ट साइडबार सामग्री से छोटा होने पर एक समस्या होगी, इसलिए मुझे लगता है कि विश्वसनीय रूप से उपयोग नहीं किया जा सकता है और जावास्क्रिप्ट स्क्रिप्ट जो मैंने देखा है आमतौर पर एनिमेटेड या आमतौर पर "धीमा" होता है (आप देख सकते हैं कि प्रत्येक स्क्रॉल के बाद फिर से चल रहा है)।

क्या कोई जावास्क्रिप्ट लाइब्रेरी/सीएसएस दृष्टिकोण को इंगित कर सकता है जो उपर्युक्त मुद्दों से ग्रस्त नहीं होगा?

संपादित: एक उदाहरण के साइडबार एक एनीमेशन के बिना शीर्ष करने के लिए चिपके हुए और सही ढंग से स्थिति से निपटने जब साइडबार से सामग्री/व्यूपोर्ट अधिक है साथ this pageलेकिन होगा।

Answer 1

आप ग्राहक खिड़की की ऊंचाई को पकड़ने और अपने साइडबार करने के लिए इसे इस तरह दे सकता है:

#sidebar { 
    position: fixed; 
    right: 0; 
    top: 0; 
    width: 200px; 
    overflow: hidden; 
} 

Here is a working JSFiddle.

तुम भी देख सकते हैं:

var sidebarHeight = $(window).innerHeight(); 

$('#sidebar')​​​​​​​​​​​.css('height',sidebarHeight);​​​​​​​​​​​​​ 

साइडबार के लिए उचित सीएसएस के साथ

आकार बदलने पर गड़बड़ी से बचने के लिए खिड़की का आकार बदलने के लिए :) Here is the way to go with jQuery

गुड लक

Answer 2

कोड और यहाँ डेमो: http://closure-library.googlecode.com/svn/docs/class_goog_ui_ScrollFloater.html

Answer 3

मैं भारी जे एस समाधान पसंद नहीं है, पूछने के लिए बहुत महत्वपूर्ण बात है - पसंदीदा अनुकूलता। IE8 में यह संभव है के बजाय

var $window = $(window), 
    $sidebar = $(sidebar); 

$window.on('resize', function(){ 
    $sidebar.height($window.innerHeight()); 
}); 

$window.resize(); 

कुछ इस तरह (शुद्ध सीएसएस समाधान) कर +:

#sidebar { 
    position: fixed; 
    left: 0; /* or right */ 
    top: 0; 
    bottom: 0; 
    overflow: auto; 
} 

जब आप शीर्ष & तल/एक ही समय में छोड़ दिया & सही मूल्य, बॉक्स होगा फैला हुआ था। (JSFiddle demo)

Answer 4

समझ गया। यह जावास्क्रिप्ट आधारित है, लेकिन मुझे यकीन है कि यह कुछ भी भारी नहीं है और यहां तक ​​कि IE8 को इसे ठीक से हल करना चाहिए।

var top = $('#sidebar').offset().top; 
var height = $('#sidebar').height(); 
var winHeight = $(window).height(); 
var gap = 10; 
$(window).scroll(function(event) { 
    var scrollTop = $(this).scrollTop(); 

    // sidebar reached the (end - viewport height) 
    if (scrollTop + winHeight >= top + height + gap) { 
     // if so, fix the sidebar and make sure that offset().top will not give us results which would cancel the fixation 
     $('#sidebar').addClass('fixed').css('top', winHeight - height - gap + 'px'); 
    } else { 
     // otherwise remove it 
     $('#sidebar').removeClass('fixed').css('top', '0px'); 
    } 
});​ 

demo

Answer 5

सुनिश्चित नहीं हैं कि आप इस पता लगा लेकिन मैं एक निहित चिपचिपा साइडबार jQuery प्लगइन बनाया है है। यह वास्तव में सरल है और आपको jQuery की केवल एक पंक्ति के साथ आने की अनुमति देता है।यहां एक नज़र डालें: http://mojotech.github.com/stickymojo/

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