Question

我想使用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 link

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

Answer 1

根据bootstrap 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中定义的第一项。如果是，那么你就处于最佳状态。

<强> Check my working JSFIDDLE example.

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

Answer 2

您可以简单地使用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>

Bootstrap 3 scrollspy - 检测div上的滚动

2 个答案: