2

我想使用 scrollspy 做一些它不一定设计的事情，但它可能会完成这项工作。

我有一个 div #myTarget，我只是想检测它何时滚动到顶部.container并在每次滚动时执行某些操作。

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!');
});

这是一个jsfiddle链接

PS我知道我可以使用其他插件，例如jQuery Waypoints，但如果可能的话，我想坚持使用Bootstrap。

4

2 回答 2

2

根据引导程序 3 文档：

当对 以外的元素进行滚动监视时<body>，请确保设置了高度和溢出-y：滚动；应用。

一旦你确定你的 scrollspy 工作正常，使用这个 jquery 代码来检测你是否在上面：

$('#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.");
   }
});

您与事件绑定，activate.bs.scrollspy并且每当它执行时，您都会去获取href当前选定项目的 。然后检查该href项目是否是您的 html 中定义的第一个项目。如果是，那么你就在上面。

检查我的工作 JSFIDDLE 示例。

每当您向下滚动并再次返回时，都会显示警告框，让您知道您已到达顶部。

于 2015-08-24T21:33:35.873 回答
0

您可以简单地使用 jQuery 滚动事件，如下所示

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;
    }

});

其中 #spy-side 是导航元素的 id

以下是我的html代码供参考：

<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>
于 2018-01-28T20:13:21.320 回答