jQuery：在文档就绪加载和滚动上运行函数

Question

我有这个函数，它为窗口区域中可见的元素添加了一个类。 它在滚动时按预期工作，但我想在document.ready上运行它。我怎么能这样做？

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)绑定在文档就绪处理程序上。

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

＆＃13;

＆＃13;

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');
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>