Bootstrap 3 scrollspy - detect scroll on div

Question

I want to use the scrollspy to do something it's not necessarily designed for, yet it may do the job.

I have a div #myTarget and I simply want to detect when it scrolled to the top of the .container and do something each time it does so.

HTML:

<div class="container" data-spy="scroll" data-target="#myTarget">
    <div class="row">
        <div class="col-md-12 some-content">.some content</div>
    </div>
    <div class="row">
        <div class="col-md-12" id="myTarget">#myTarget</div>
    </div>
</div>

JS:

$('body').scrollspy({
    target: '#myTarget'
});

$('#myTarget').on('activate.bs.scrollspy', function () {
    console.log('got to the target!');
});

Here is a jsfiddle link

P.S. I know I can use other plugins such e.g. jQuery Waypoints but I would like to stick just to Bootstrap if possible.

...how would the target scroll at the top of the container? is the container an overflown element? I would suggest creating a function that detects the target's top offset and binding the scroll function to it — scooterlord, Oct 14 '14 at 21:04

score 2 · Accepted Answer · edited Jul 11 '17 at 01:50

As per bootstrap 3 documentation:

When scrollspying on elements other than the <body>, be sure to have a height set and overflow-y: scroll; applied.

Once you are sure that your scrollspy is working, use this jquery code to detect if you are on top:

$('#myScrollspy').on('activate.bs.scrollspy', function () {
   var activeSection = $(this).find("li.active a").attr("href");

   if(activeSection === "#section1")
   {
       alert("I have reached to the top.");
   }
});

You bind with the event activate.bs.scrollspy and whenever it executes you go and fetch the href of the current selected item. Then you check if that href item is the first item defined in your html. If yes, then you are on top.

Check my working JSFIDDLE example.

Whenever you scroll down and again come back up, the alert box will show up letting you know that you have reached to the top.

score 0 · Answer 2 · answered Jan 28 '18 at 20:13

You can simply use the jQuery scroll event as shown below

var current_position = '';

$('#spy-element').on('scroll', function () {
   var activeSection = $("#spy-side").find("li.active a").text();

    if( current_position != activeSection ){
        //do something here

        current_position = activeSection;
    }

});

Where #spy-side is the id of the navigation element

Below is my html code for reference:

<div class="col-md-3" id="spy-side">

        <div class="well" style="padding:0;">

            <button class="btn btn-block btn-default"><i class="icon-search"></i>&nbsp;&nbsp;Search Existing Templates</button>

            <div id="navbar-example2" class="navbar " role="navigation">
                <div class="navbar-header">
                   <a class="navbar-brand" href="#" onclick="return false;">Navigation</a>
                </div>
                <div class="collapse1 navbar-collapse" id="spy-target">
                   <ul class="nav navbar-nav">
                      <li class="active"><a href="#template-definition">Template Definition</a></li>
                      <li class=""><a href="#performance-dimensions">Performance Dimensions</a></li>
                      <li class=""><a href="#sub-performance-dimensions">Sub-performance Dimensions</a></li>
                      <li class=""><a href="#weight-allocation">Weight Allocation</a></li>
                   </ul>
                </div>
             </div>
         </div>

    </div>

<div class="col-md-9" >

        <div class="row" >
        <div class="col-md-12" >

        <div style="position:relative; clear:both;">
            <div class="pull-right">
                <button class="btn blue btn-sm"><i class="icon-save"></i>&nbsp;Save</button>
                <button class="btn  btn-sm"><i class="icon-file"></i>&nbsp;Preview</button>
                <button class="btn  btn-sm"><i class="icon-trash"></i>&nbsp;Cancel</button>
            </div>
            <div class="pull-left">
                <strong id="current-position" style="text-transform:uppercase;"></strong>
            </div>
        </div>

        </div>
        </div>

        <div id="spy-parent" style="position:relative;">
         <div  id="spy-element" class="scrollspy-example">
            <h4 id="template-definition">STEP 1: Template Definition</h4>

Bootstrap 3 scrollspy - detect scroll on div

2 Answers2