jQuery:在文档“ Ready Load and Scroll”上运行功能

Question

我具有此功能，该功能将类添加到窗口区域中可见的元素中。它在滚动时按预期工作，但我也想在document..dready上运行它。我该怎么做？

JS：

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));
}
$(document).bind('ready load scroll', function() {
  $('.box').each(function() {
    if (isScrolledIntoView(this) === true) {
      $(this).addClass('in-view')
    } else {
      $(this).removeClass('in-view');
    }
  });
});

html：

<div class="box">Hello</div>
<div class="box">Hello</div>
<div class="box">Hello</div>
<div class="box">Hello</div>
<div class="box">Hello</div>

jsfiddle

Answer 1

绑定 scroll事件和 .trigger(event) IT在文档就绪处理程序上。

$(document).ready(function() {
  $(document).on('scroll', function() {
    $('.box').each(function() {
      $(this).toggleClass('in-view', isScrolledIntoView(this));
    });
  }).trigger('scroll');
});

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));
}
$(document).ready(function() {
  $(document).on('scroll', function() {
    $('.box').each(function() {
      $(this).toggleClass('in-view', isScrolledIntoView(this));
    });
  }).trigger('scroll');
});

.box {
  opacity: 0;
  margin: 50px 0;
  padding: 50px;
  background-color: #901a1e;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.box.in-view {
  opacity: 1;
  color: #fff;
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">Hello</div>
<div class="box">Hello</div>
<div class="box">Hello</div>
<div class="box">Hello</div>
<div class="box">Hello</div>
<div class="box">Hello</div>
<div class="box">Hello</div>
<div class="box">Hello</div>
<div class="box">Hello</div>
<div class="box">Hello</div>
<div class="box">Hello</div>

Answer 2

我已经对代码进行了以下更改，并得到了我相信您想要的效果。

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));
}
$(document).ready( function() {
  $('.box').each(function() {
    if (isScrolledIntoView(this) === true) {
      $(this).addClass('in-view')
    } else {
      $(this).removeClass('in-view');
    }
  });
});
$(document).bind('load scroll', function() {
  $('.box').each(function() {
    if (isScrolledIntoView(this) === true) {
      $(this).addClass('in-view')
    } else {
      $(this).removeClass('in-view');
    }
  });
});

.box {
  opacity: 0;
  margin: 50px 0;
  padding: 50px;
  background-color: #901a1e;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.box.in-view {
  opacity: 1;
  color: #fff;
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">Hello</div>
<div class="box">Hello</div>
<div class="box">Hello</div>
<div class="box">Hello</div>
<div class="box">Hello</div>
<div class="box">Hello</div>
<div class="box">Hello</div>
<div class="box">Hello</div>
<div class="box">Hello</div>
<div class="box">Hello</div>
<div class="box">Hello</div>