Jquery在滚动时检测屏幕上可见的块

Question

大家好我有一些问题，如果不是很难请帮忙。

如果我有一些div块计数

<div class="main">
      <div class="box block1"></div>
      <div class="box block2"></div>
      <div class="box block3"></div>
      <div class="box block4"></div>
</div> 

好了，现在当你滚动并阻止在屏幕上显示时，我需要在该块中执行某些操作我每次滚动检测滚动顶部并使用块偏移顶部检查它时可以使用jquery执行此操作但是它不好解决方案因为我需要写许多“如果”要检查它并且当我有固定的块数时它可以工作但我需要它会动态工作。我找到一些插件，但我不想使用插件。我是一些基本的简单脚本，我可以在其他网站上更改或添加或修改

如果您有时间这样做，请提供帮助

这是我的HTML

example

我在我的投资组合页面中做了一些事情，但它不是动态的，我编写了错误的代码:)

滚动时，您可以在菜单上看到它，如果可见块

，我将活动类添加到菜单

portfolio

Answer 1

试试这个

function isVisible( row, container ){
    
    var elementTop = $(row).offset().top,
        elementHeight = $(row).height(),
        containerTop = container.scrollTop(),
        containerHeight = container.height();
    
    return ((((elementTop - containerTop) + elementHeight) > 0) && ((elementTop - containerTop) < containerHeight));
}
$(window).scroll(function(){
  $('.main div').each(function(){
      if(isVisible($(this), $(window))){
      console.log($(this).attr('class')+" is visible");
      };  
  });
});

.main .box {
        position: relative;
        width: 100%;
    }
    .main .block1 {
        background: red;
        height: 800px;
    }
    .main .block2 {
        background: green;
        height: 600px;
    }
    .main .block3 {
        background: yellow;
        height: 900px;
    }
    .main .block4 {
        background: orange;
        height: 1000px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
          <div class="box block1"></div>
          <div class="box block2"></div>
          <div class="box block3"></div>
          <div class="box block4"></div>
    </div>

在控制台上，您将注意到只显示了块元素的可见部分！

默认情况下，您可以通过删除滚动事件来获取显示块的一部分。

Answer 2

＆＃13;

＆＃13;

// get top positions and references to all blocks
var pos = $(".box").map(function(){
  var $this = $(this);
  return {
    el: $this,
    top: $this.offset().top
  };
}).get();

var $result = $("#result-text");

// Set document scrolling event handler
$(document).on("scroll", function() {  
  var visible = [];
  var scrollStart = $(this).scrollTop();
  var scrollEnd = scrollStart+$(window).height();
  var vis=[];
  for (var i=0, l=pos.length; i<l; i++) {
    if (pos[i].top < scrollStart || pos[i].top > scrollEnd) { continue; }
    vis.push(pos[i].el.attr("class"));
  }
  $result.text("");
  $result.text(vis.join(", "));

}).scroll();

＆＃13;

#result {
  background: #fff;
  border: 1px solid red;
  position: fixed;
  top: 0;
  left: 0;
}

.box {
  height: 200px;
  border: 1px solid;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="result">You can see: <span id="result-text"></span></div>
<div class="main">
      <div class="box block1"></div>
      <div class="box block2"></div>
      <div class="box block3"></div>
      <div class="box block4"></div>
      <div class="box block5"></div>
      <div class="box block6"></div>
      <div class="box block7"></div>
      <div class="box block8"></div>
      <div class="box block9"></div>
      <div class="box block10"></div>
</div>

＆＃13;

＆＃13;

＆＃13;