बूटस्ट्रैप स्क्रॉल जासूस का उपयोग कैसे करें?

मैं स्क्रॉल जासूस को लंबवत नौसेना के साथ ठीक से काम करने के लिए नहीं मिल सकता। नीचे मैं आपके द्वारा उपयोग किए जाने वाले कोड को पा सकता हूं। किसी कारण से, केवल "दो" सक्रिय हो जाता है।बूटस्ट्रैप स्क्रॉल जासूस का उपयोग कैसे करें?

किसी को भी क्या गलत है के बारे में एक विचार है?

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Twitter Bootstrap Scroll Spy Playground</title> 
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> 
    </head> 
    <body> 
    <div class="container"> 
     <div class="row"> 
     <div class="span3"> 
      <ul class="navbar nav nav-list affix"> 
       <li class="active"><a href="#one">One</a></li> 
       <li><a href="#two">Two</a></li> 
      </ul> 
     </div> 
     <div class="span1" data-spy="scroll"> 
      <section id="one"> 
      <h1>One</h1> 
      <h2>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. </h2> 
      </section> 
      <section id="two"> 
      <h1>Two</h1> 
      <h2>Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</h2> 
      </section> 
     </div> 
     </div> 
    </div> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script src="bootstrap/js/bootstrap.js"></script> 
</body> 
</html>

स्रोत

2012-10-30 user1780429

आप की तरह http://jsfiddle.net/mCxqY/

<body data-spy="scroll" data-target="#navbar"> 
    <div id="post1" class="box"> 
     <h1>Post 1</h1> 
     <p> Scroll Down↓</p> 
    </div> 
    <div id="post2" class="box"><h1>Post 2</h1></div> 
    <div id="post3" class="box"><h1>Post 3</h1></div> 

    <div id="navbar"> 
     <ul class="nav"> 
      <li><a href="#post1">Post 1</a></li> 
      <li><a href="#post2">Post 2</a></li> 
      <li><a href="#post3">Post 3</a></li> 
     </ul> 
    </div> 

    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"></script> 
</body>

सीएसएस

@import url(http://twitter.github.com/bootstrap/assets/css/bootstrap.css); 
.box{ 
    margin: 20px; padding: 15px; 
    background: #eee; 
    height: 500px; 
} 
#navbar{ 
    position: fixed; 
    bottom: 0; left: 20px; 
    width: 100%; 
    background: #fff; 
} 
.nav li a{ 
    float: left; 
    width: 80px; 
    padding: 15px 0; 
} 
.nav li a:hover{ 
    color: #f33 !important; 
    background: none; 
} 
.nav li.active a{ 
    color: #f55; 
    text-decoration: underline; 
}

स्रोत

2012-10-30 06:52:29

उत्तर के लिए धन्यवाद का उपयोग करें। हालांकि, मैं अभी भी नहीं पता है कि मूल कोड के साथ गलत है। – user1780429

दरअसल, मैंने आपके उदाहरण को एक स्टैंडअलोन फ़ाइल में निकालने का प्रयास किया, और यह मेरे लिए काम नहीं करता है। यहां देखें: https://dl.dropbox.com/u/18323746/Tmp/html-playground/try-stakoverflow-answer-original.html – user1780429

बेवकूफ काम नहीं करता है? मैंने कई ब्राउज़रों की कोशिश की ... –

यह कर सकते हैं अपने आप के लिए इस बाहर छँटाई में, मैं पाया है कि तत्व पर जासूसी की जा रही में स्क्रॉल बार होना आवश्यक है।

इस फिडल पर एक नज़र डालें: http://jsfiddle.net/adamp/qgU6h/1/

आप या तो सीधे शरीर तत्व ($('body').scrollspy()) या अपनी सामग्री एक स्पष्ट ऊंचाई देने के लिए और एक स्क्रॉलबार को दिखाने के लिए उसे बलपूर्वक पर जासूस।

(आप बूटस्ट्रैप documentation example को देखें, तो यह निश्चित ऊंचाई काम कर देता है।)

स्रोत

2013-03-28 15:14:50

* * दस्तावेज उदाहरण ** लिंक मर चुका है, आप इसे [यहां] (http://twitter.github.io/bootstrap/2.3.2/javascript.html#scrollspy) पा सकते हैं। –

मैंने पोस्ट में scrollspy दस्तावेज़ यूआरएल संपादित किया। "Spied तत्व के लिए स्क्रॉल बार होने की आवश्यकता है" के लिए –

+1, यही कारण है कि मेरे लिए चाल है! – David

हताशा और अनुसंधान के घंटे के बाद, मुझे लगता है कि कई लोगों को भी बूटस्ट्रैप Affix के दस्तावेज़ से खुश नहीं हैं आया था (www.mtjhax.wordpress.com)। हालांकि चारों ओर देख सब के बाद, कैरल Skelly द्वारा इस समाधान मेरे लिए काम किया:

<body data-spy="scroll" data-target="#navbar"> 
    ... 
</body>

और नेवबार ही चाहिए: http://bootply.com/63937

शरीर इस तरह दिखना चाहिए, मान लें कि आपका नेविगेशन आईडी "नेवबार" था इस प्रकार:

<div class="navbar" id="navbar"> 
    <ul class="nav navbar-nav"> 
     <li>...</li> 
     <li>...</li> 
     <li>...</li> 
    </ul>    
</div>

फिर आप प्लगइन प्रारंभ ...

$('#nav').affix({ 
    offset: {top: 0} 
});

... और नेविगेशन उचित स्टाइल दे:

#nav.affix { 
    position: fixed; 
    top: 0; 
    width: 100% 
}

स्रोत

2013-08-12 20:16:40

प्रश्न स्क्रॉलस्पी सुविधा के बारे में है, न कि प्रत्यय। – chikamichi

मैं दो बातें मेरे लिए काम करने के लिए Scrollspy पाने के लिए करना था।

पहले, मैं <body> तत्व के लिए ऊँचाई देने के लिए किया था:

<style> 

    .body 
    { 
    height: 100%; 
    } 

</style>  

<body data-spy="scroll" data-target="#scrollElement" data-offset="0">

मुझे लगता है कि इस वजह से स्क्रॉल जासूस है कि आप पर जासूसी कर रहे हैं तत्व की ऊंचाई प्राप्त करने के लिए कोशिश कर रहा है, लेकिन यदि आपके तत्व के लिए निर्दिष्ट ऊंचाई नहीं है, तो यह शून्य (या 0?) मान पास हो जाती है, जो स्क्रिप्ट की गणना को तोड़ने लगती है।

दूसरा, मुझे यह सुनिश्चित करना था कि मेरे आईडी तत्वों (एनएवी एंकरों की ओर इशारा करते हुए) के बीच पर्याप्त लंबवत स्थान था।

मुझे आवश्यक स्थान की सटीक मात्रा का पता नहीं लगा सका (यह डेटा ऑफसेट विशेषता के आधार पर भिन्न होता है, इसलिए शायद इसके साथ कुछ करने के लिए कुछ है), लेकिन मुझे लगता है कि यदि आपके पास ऊंचाई सेट है आपका जासूस तत्व और scrollspy अभी भी काम नहीं कर रहा है - बस अपने आईडी तत्वों के बीच अधिक सामग्री जोड़ें।

स्रोत

2014-07-18 01:15:21 Jerreck

धन्यवाद Jerreck मैं मेरा मेरे सीएसएस के शरीर चयनकर्ता में

height: 100%;

की मदद से काम करता है बनाने के लिए कर रहा था

इसके अलावा

के रूप में बूटस्ट्रैप http://getbootstrap.com/javascript/#scrollspy पर

लोगों द्वारा की सिफारिश मैं भी शरीर में position: relative; जोड़ दिया है। HTML में

body { 
    position: relative; 
    height: 100%; 
    /* … */ 
}

<body> में मैं

data-offset="0"

को दूर करने के लिए किया था, तो यह इस

<body data-spy="scroll" data-target="#navigation">

की तरह है:

मेरी सीएसएस में शरीर चयनकर्ता की शुरुआत इस प्रकार है

स्रोत

2014-08-18 00:34:02

$(window).scroll(function() { 
    if ($(".navbar").offset().top > 50) { 
     $(".navbar-fixed-top").addClass("top-nav-collapse"); 
    } else { 
     $(".navbar-fixed-top").removeClass("top-nav-collapse"); 
    } 
}); 

//jQuery for page scrolling feature - requires jQuery Easing plugin 
$(function() { 
    $('a.page-scroll').bind('click', function(event) { 
     var $anchor = $(this); 
     $('html, body').stop().animate({ 
      scrollTop: $($anchor.attr('href')).offset().top 
     }, 1500, 'easeInOutExpo'); 
     event.preventDefault(); 
    }); 
});

स्रोत

2016-06-23 12:14:27

मैं इसे इस तरह से किया था। डेटा लक्ष्य के लिए मैं वर्ग के नाम .navbar

 <body data-spy="scroll" data-target=".navbar" data-offset="50"> 
     <nav class="navbar navbar-default navbar-fixed-top" >

स्रोत

2017-06-25 23:43:03

बूटस्ट्रैप स्क्रॉल जासूस का उपयोग कैसे करें?

उत्तर

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