स्क्रॉल करते समय आप div का अनुसरण कैसे करते हैं?

Question

मेरे पास बाईं ओर एक div है जिसमें व्यवसाय के घंटे और मौसम शामिल हैं। मैं उस div को स्क्रॉल करने के लिए नीचे स्क्रॉल करना चाहता हूं और उपयोगकर्ता स्क्रॉल करता हूं। तो यह पृष्ठ के साथ पालन और आगे बढ़ना होगा। मैं इसका प्रयास कैसे करूं? यह मेरी वेबसाइट judystropicalgarden.com

धन्यवाद

Answer 1

है इसे पूर्ण करने के fixed सीएसएस स्थिति संपत्ति का उपयोग कर सकते हैं। इस here पर एक बुनियादी ट्यूटोरियल है।

संपादित करें: हालांकि, यह दृष्टिकोण आईई संस्करण < आईई 7 में समर्थित नहीं है, और केवल आईई 7 में मानक मानकों में है। इस पर थोड़ा और विस्तार here पर चर्चा की गई है।

एक हैक भी है, here समझाया गया है, जो दिखाता है कि पूर्ण स्थिति को प्रभावित किए बिना आईई 6 में निश्चित स्थिति को कैसे पूरा किया जाए। आईई का कौन सा संस्करण आप अपनी वेबसाइट को लक्षित कर रहे हैं?

Answer 2

सीएसएस से स्टाइल का उपयोग करके, आप परिभाषित कर सकते हैं कि कुछ कैसे स्थित है। यदि आप तत्व को निश्चित के रूप में परिभाषित करते हैं, तो यह हमेशा स्क्रीन पर एक ही स्थिति में हमेशा रहेगा।

div 
{ 
    position:fixed; 
    top:20px; 
} 

Answer 3

आप उपयोग कर सकते हैं सीएसएस संपत्ति फिक्स्ड, या यदि आप तो देखते ठीक अधिक कुछ चाहिए आप जावास्क्रिप्ट का उपयोग करें और scrollTop संपत्ति जो परिभाषित करता है जहाँ उपयोगकर्ता एजेंट की स्क्रॉलबार स्थान है 0 ट्रैक (कम से किया जा रहा करने की जरूरत है शीर्ष ... और x

.Fixed 
{ 
    position: fixed; 
    top: 20px; 
} 

या jQuery के साथ नीचे जा रहा है):

$('#ParentContainer').scroll(function() { 
    $('#FixedDiv').css('top', $(this).scrollTop()); 
}); 

Answer 4

एक बेहतर jQuery जवाब होगा:

$('#ParentContainer').scroll(function() { 
    $('#FixedDiv').animate({top:$(this).scrollTop()}); 
}); 

तुम भी scrollTop यानी .scrollTop के बाद एक नंबर में जोड़ सकते हैं() + 5 यह शौकीन देने के लिए।

एक अच्छा सुझाव 100 तक की अवधि को सीमित करने और डिफ़ॉल्ट स्विंग से रैखिक easing तक जाने के लिए भी होगा।

$('#ParentContainer').scroll(function() { 
    $('#FixedDiv').animate({top:$(this).scrollTop()},100,"linear"); 
}) 

Answer 5

स्थिति: तय; संपत्ति को काम करना चाहिए, मैंने इसे अपनी वेबसाइट पर इस्तेमाल किया और यह ठीक काम किया। http://www.w3schools.com/css/css_positioning.asp

की