2013-10-20 6 views
7

नएबूटस्ट्रैप साइडबार स्क्रॉल, Affix और Scrollspy

तो स्क्रॉल अब काम कर रहा है ... लेकिन यह पृष्ठ के शीर्ष पर निश्चित होती है। मुझे इसे सही स्थिति (सामग्री के बगल में) होने की आवश्यकता है और फिर सामग्री के साथ इसकी वर्तमान स्थिति के साथ स्क्रॉल करना प्रारंभ करें।

मैं इस एक यहाँ की तरह स्क्रॉल करने के लिए मेरे साइडबार पाने के लिए कोशिश कर रहा हूँ ->http://getbootstrap.com/2.3.2/components.html

वेबसाइट http://www.katyasarmiento.zzl.org है (एक नि: शुल्क अब के लिए की मेजबानी की साइट)


पुराने

मुझे इसके साथ वास्तव में कठिन समय है। मैंने जो कुछ भी कर सकता था उसे देखा है और मैं अभी भी इसे समझ नहीं सकता। मुझे यह एक ट्यूटोरियल के साथ थोड़ी देर के लिए काम करने के लिए मिला, लेकिन यह ScrollSpy के साथ अच्छी तरह से काम नहीं किया। तो मैं बूटस्ट्रैप के एफ़िक्स का उपयोग करने की कोशिश कर रहा हूं।

मैं जावास्क्रिप्ट/jquery के लिए नया हूं इसलिए यदि कोई मेरी वेबसाइट देख सकता है और यह देखने के लिए जांच कर रहा है कि मैं क्या गलत कर रहा हूं।

स्क्रॉलSpy अभी काम कर रहा है मुझे लगता है, मुझे पेज के साथ स्क्रॉल करने के लिए साइडबार नहीं मिल रहा है।

उत्तर

16

अभिजात वर्ग मुझे यह काम करने के लिए मिला!

मैं क्या किया था निम्नलिखित बदलने ...

<div class="bs-docs-sidebar span3"> 
    <ul class="nav nav-list bs-docs-sidenav affix-top"> 

करने के लिए ...

<div class="bs-docs-sidebar span3"> 
    <ul class="nav nav-list bs-docs-sidenav affix" data-spy="affix" data-offset-top="255" data-offset-bottom="200"> 

तो मैं डेटा-जासूस और डेटा ऑफसेट "बी एस docs- पर डाल sidenav "वर्ग, स्क्रिप्ट को" बीएस-डॉक्स-साइडबार "वर्ग के बजाय उस वर्ग में भी बदल दिया।

तो मैं "चिपका दें टॉप" "चिपका", और "चिपका दें-नीचे" की सीएसएस संपादित और यह बहुत अच्छी तरह से काम करता है :)

मेरे मूल समस्या sidenav के बजाय साइडबार वर्ग के लिए बात कर रहे थे कक्षा, क्योंकि यही मेरा एफ़िक्स सीएसएस काम कर रहा था।

आशा इस किसी को भी है कि मेरा एक समान मुद्दा रहा था :)

क्या मुझे इस के साथ मदद में मदद करता है thesetutorials थे।

+1

अच्छा जवाब लेकिन लिंक मर चुका है। – Manwal

3

अपने पृष्ठ पर ul तत्व में आप written- है

<ul class="nav nav-list bs-docs-sidenav"> 

आप nav nav-list bs-docs-sidenav कक्षाएं कहाँ का इस्तेमाल किया है एक और वर्ग affix-top जोड़ें। तो यह होगा -

<ul class="nav nav-list bs-docs-sidenav affix-top"> 

और जैसे इस लाइन इस लाइन है, जो आपके ul तत्व-

<div class="bs-docs-sidebar span3 affix-top" data-offset-top="50" data-spy="affix"> 

की मूल नोड है से वर्ग affix-top हटाने और लिखने

<div class="bs-docs-sidebar span3"> 
+0

वाह! यह बहुत आसान था ... लेकिन अब मैं इसे चिपकने लगने के लिए कैसे प्राप्त करूं दर्शकों ने बैनर के पीछे और पाठ के अनुभाग में स्क्रॉल किया है? मैंने नया दस्तावेज़ अपलोड कर लिया है ताकि आप देख सकें कि मेरा क्या मतलब है http://www.katyasarmiento.zzl.org – Kitkatnik

+0

@ किटकैटिक अपडेटेड उत्तर की जांच करें .. – Ritesh

+0

ठीक है, मैंने ऐसा किया और यह स्थिति में वापस आ गया लेकिन स्क्रॉलिंग ' टी काम नहीं क्या मुझे डेटा-ऑफ़सेट-टॉप और डेटा-जासूस कहीं और जोड़ने की ज़रूरत है? और क्या मुझे एफ़िक्स-टॉप या एफ़िक्स के सीएसएस को संपादित करने की आवश्यकता है? – Kitkatnik

संबंधित मुद्दे