Question

我想在Plunk示例中使用$(window).scroll函数在用户滚动窗口时更改变量：

$(document).ready(function(){   
  $(window).scroll(function(){
      document.getElementById('myResults').innerHTML = $(window).scrollTop();
  });
});

所需的行为是#myResults将从其默认html值更改，并在每次滚动时更新为当前$(window).scrollTop();值。

但我无法让它发挥作用。我不相信它是导致问题的Angular路由模块，因为我创建了a second example，其中#myResults元素作为视图的一部分呈现，它仍然可以正常工作。我的主要例子是通过视图呈现但不起作用......第一个例子中有什么不同？我怎样才能得到第一个可行的例子？

Answer 1

在第一个示例中，window不是滚动条应用于的对象。

而是以下<div>：

<div id="targetDiv" data-ng-controller="MainCtrl" class="ng-scope">

positioned填充视口，并允许在其内容overflows的尺寸滚动时滚动：

// Main Panel Styling (line 229 of main.less)

#targetDiv{
    /* ... */

    position: absolute;
    top:      0;
    bottom:   0;
    left:     0;
    right:    0;
    overflow: auto;

    /* ... */
}

您必须为事件和当前值引用此元素以响应其滚动的内容：

$(document).ready(function(){
  $('#targetDiv').scroll(function(){
    document.getElementById('myResults').innerHTML = $('#targetDiv').scrollTop();
  });
});

$（window）.scroll（function（）{...}）没有在Bootstrap v3.2中加载？

1 个答案: