CODEWITHSUNDEEP
jquery
Meek
Meek

Reputation: 3348

jQuery: run function on document ready load and scroll

I have this function which adds a class to elements which are visible in the window area. It works as intended when scrolling, but I would like to run it on document.ready as well. How can I do that?

The 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

Upvotes: 1

Views: 3531

Answers (2)

Satpal
Satpal

Reputation: 133403

Bind scroll event and .trigger(event) it on document ready handler.

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

Upvotes: 3

Nikhil Baby
Nikhil Baby

Reputation: 873

I have made the following changes in the code and got the effect which I believe you want.

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>

Upvotes: 0

Related Questions