2

我现在正在建立一个网站，在滚动时会触发一堆动画和图形事件（你知道花哨的）。我正在尝试决定如何测量滚动到页面下方的距离。

选项一，以像素为单位测量并触发事件：

$(document).scroll(function(){
  var scrolllength  = $(window).scrollTop()

switch(key) {
  case 84:
    foo();
    break;
  case 185:
    bar();
    break;
  default:
    return;
}

优点：可能更快

缺点：如果任何东西的高度发生变化，我必须手动测量和更新它。这是一个静态的坐姿，但我确实希望有很多调整和修补。

选项二，跟踪 DOM 元素。

$(document).scroll(function(){
  //this will be a bunch of differnt ones but for example
  if(isScrolledIntoView('#div'){
    $('body').css('background','black');
  }
}

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

优点：动态且与内容无关

缺点：因为每次触发滚动时都会触发，我担心这种方法会导致滚动不流畅。我至少要检查 20 件这种性质的东西。该页面将分为不同的部分，或者我可以首先检查哪些部分是可见的，然后再检查该特定部分中的项目。

我当然愿意接受更多选择！

4

2 回答 2

1

一种选择是在脚本开始时存储您需要的任何 DIV 的偏移量：

var triggerone = $("#whateverdiv").offset().top;
var triggertwo = $("#whateverotherdiv").offset().top;

$(document).scroll(function(){
    var scrolllength = $(window).scrollTop()

    switch(scrolllength) {
        case triggerone:
            foo();
            break;
        case triggertwo:
            bar();
            break;
        default:
            return;
    }
}

这将第二种解决方案的易于维护性与第一种解决方案的（近似）速度相结合。

于 2013-06-23T07:55:57.487 回答
-1

很好的答案。学习的东西。

我做了一个小小提琴链接

该switch语句的问题在于它检查相等性并且用户通常会继续滚动。无论如何，我无法让它与开关一起使用，所以我使用了不等式。

于 2013-06-23T08:34:27.807 回答