0

我正在编写一个将在应用程序的多个视图上执行的函数，每个视图最多可以有 50 个相同元素的实例：'.console'。每次视口滚动到每个实例时，我都需要能够执行一个操作。我有以下代码设置变量：

  //Create empty array with variable values, up to 50 
  var console = [];

  //Find each instance of ".console" and populate the array with its pixel position.
  $('.console').each(function() {
    console.push($(this)[0].offsetTop);
  });

  //Determine the current pixel position of the scroll
  var scroll = $(document).scrollTop();

这些变量都工作得很好，而且花花公子，但是经过几个小时的倾注 jquery 文档后，我无法弄清楚 if 语句。这是我对数组中的第一项效果很好的内容：

  if (scroll == console[0]){
    $('.container').show();
  } else {
    $('.container').hide();
  }

但是，我希望滚动位置与该数组中的每个值匹配，希望是这样的：

if (scroll == console[0-50])

这是完整的块：

$(document).on('scroll', function(){

  //Create empty array with variable values, up to 50 
  var console = [];

  //Find each instance of ".console" and populate the array with its pixel position.
  $('.console').each(function() {
    console.push($(this)[0].offsetTop);
  });

  //Determine the current pixel position of the scroll
  var scroll = $(document).scrollTop();

  //Anytime the scroll matches any of the instances of console, show a div
  if (scroll == console[0]){
    $('.container').show();
  } else {
    $('.container').hide();
  }
});

任何帮助，将不胜感激。我对 Javascript/JQuery 很陌生，所以如果我完全以错误的方式解决问题，请告诉我。谢谢！

4

5 回答 5

0

既然你说它适用于第一个，我猜这可能有效。

// cache the container     
var container = $('.container');

$(document).on('scroll', function(){

  //Determine the current pixel position of the scroll
  var scroll = $(document).scrollTop();

  //Create empty array with variable values, up to 50 
  var console = [];

  //Find each instance of ".console" and populate the array with its pixel position.
  $('.console').each(function(index) {
    console.push($(this)[0].offsetTop);
    if (scroll == console[index]){
      $(container).show();
    } else {
      $(container).hide();
    }
  });
});
于 2013-09-10T19:09:25.787 回答
0

要回答这个问题，您可以这样做：

var cons = $.map($('.console'), function(el) {
    return $(el).offset().top;
});

$(document).on('scroll', function(){
    var scroll = $(window).scrollTop();
    $('.container').toggle( $.inArray(scroll, cons) != -1 );
});

但是为一个范围创建一些东西，考虑到每个元素的高度，窗口的高度等会涉及更多。

于 2013-09-10T19:12:23.820 回答
0

虽然问题已通过另一个答案解决，但弄清楚如何为数组中的每个值执行循环并没有真正解决......直到现在！

这可能是一种非常粗暴和臃肿的方式，但是如果您基本上计算数组中有多少项，那么您可以运行多次循环，为数组中的每个值放入索引。下面的代码：

//Create empty array with variable values
var console = [];

//Find each instance of ".console" and populate the array with its pixel position.
$('.console').each(function() {
    console.push($(this)[0].offsetTop);
});

//Count the number of items in the array
var consoleIndex = console.length - 1;

    $(document).on('scroll', function(){

        //Determine the current pixel position of the scroll
        var scroll = $(document).scrollTop();

        //Anytime the scroll matches any of the instances of console, show a div
        for (var i = 0; i <= consoleIndex; i++) {
            if (scroll = console[i]) {
                $('.container').toggle();
            }
        } 
    });
于 2013-09-11T19:19:22.770 回答
0

您不妨看看Waypoints。这是一个 jQuery 插件，非常适合您想要完成的工作。

我快速制作了一个 jsFiddle 来展示它：http: //jsfiddle.net/dmillz/4xqMb/

$(".console").waypoint(function(direction) {
    // Hide or show your ".container" object
});

更多航点示例：http: //imakewebthings.com/jquery-waypoints/#get-started

于 2013-09-10T19:17:26.407 回答
0

希望我能理解您的问题，具体如下：

您有一堆元素与.console该类，并且您希望它们一出现在视口中。当这些元素不在视口中时，您希望它们消失吗？

由于您对这些具有.console类的对象何时在视口中感兴趣，我建议使用这个 jQuery 插件

http://plugins.jquery.com/appear/

https://github.com/morr/jquery.appear

我建议用另一个类将每个对象包装.console在一个容器中，然后当这些容器出现和消失时显示和隐藏它们。

在准备好文档时，只需执行以下操作：

$(document).ready(function() {
   $('<.container-class>').appear();

   $('<.container-class>').on('appear', function() { $(this).find('.console').show(); });

   $('<.container-class>').on('disappear', function() { $(this).find('.console').hide(); });
});
于 2013-09-10T19:17:45.303 回答