Viewport JQuery - change document ready to if element is in viewport

问题

While working on a bigger project I made a box with different content.

The box is 1000px width and shows 5 (out of 50) pictures. The box pages swtich from the first 5 to the next 5 and so on every 8 seconds (already wrote this with jQuery animated).

Now my problem is, that the Box is in the middle of my page, so when visitors stay at the top and scroll down like 30 seconds later they miss the first pictures in my Box.

So my plan is it to start the paging of my box at the very moment the visitor can see the box (viewport).

i made a test page for that

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box">THIS BOX<br>THIS BOX<br>THIS BOX</div>
<div class="box"></div>
<div class="box"></div>

.box {
    border:2px solid black;
    height: 400px; 
    width: 200px;
    margin: 0 auto;
    margin-top:10px;
}

http://jsfiddle.net/H9xr8/

so far Iam using

jQuery(document).ready(function(){
    getThemenCount();
    moveThemenAnimate();
});

My plan is to switch from the document ready to a if element is in viewport kind of thing

I've aleasy tried to find different ways but i cant seem to get it working.

http://jsfiddle.net/moagrius/wN7ah/

is only working with different classes and with clicks.

What i want to do (and what i cant get working) is that i want to start my animation script in the very Moment the Box gets in the viewpoer of the visitor. So that he will see my pictures in the box starting from picture 1.

is there any possibility to get this to work like I planed it? somehow I cant find out how to set the jQuery expression + the script to work from itself only if i use classes and clicks (like in the fiddle above)

回答1:

You need to listen for the window scroll event, and fire a callback to check if the box is in the viewport yet.

Listening to the scroll event can be dangerous from a performance aspect, as naturally the callback will fire whenever the user is scrolling. It's considered best practise to limit the times the callback is fired using a throttling mechanic.

This working example checks the user scroll position 4 times every second, and disables the event listener once the box has appeared in view.

http://jsfiddle.net/H9xr8/1/

// document ready
$(function () {

    // define the isOnScreen plugin from http://jsfiddle.net/moagrius/wN7ah/
    $.fn.isOnScreen = function() {
        var win = $(window);

        var viewport = {
            top : win.scrollTop(),
            left : win.scrollLeft(),
            right: win.scrollLeft() + win.width(),
            bottom: win.scrollTop() + win.height()
        };

        var bounds = this.offset();
        bounds.right = bounds.left + this.outerWidth();
        bounds.bottom = bounds.top + this.outerHeight();

        return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); 
    };

    // define throttling function for use in scroll event listener
    // ref: http://blogorama.nerdworks.in/javascriptfunctionthrottlingan/
    function throttle(delay, callback) {
        var previousCall = new Date().getTime();
        return function() {
            var time = new Date().getTime();
            if ((time - previousCall) >= delay) {
                previousCall = time;
                callback.apply(null, arguments);
            }
        };
    }

    // set up an event to listen for window scroll 4 times a second
    $(window).on('scroll', throttle( 250, function () {

        // if #the-box is visible the call init functions and disable window scroll
        // event listener, as you only want to initialise the lightbox once
        if ( $("#the-box").isOnScreen() ) {

            // for demo purposes
            alert('init');

            // call your init functions here
            //getThemenCount();
            //moveThemenAnimate();

            // turn off scroll listener
            $(window).off('scroll');
        }
    }));
});

回答2:

Based on what has been posted, this could be a simple working example,

http://jsbin.com/majavubu/1/edit

js

$(document).ready(function(){

  $(window).scroll(function(){
    if($(".the-box").isOnScreen()){
      if(!animationStarted){
        startAnimation();
      }
  }else{
    stopAnimation();
  }
  });
});

var animationStarted=false;
function startAnimation(){
  animationStarted = true;
  for(var i=0;i<10&&animationStarted;i++){
    $(".the-box").animate({"background-color":randomColor()}).delay(500);
  }
}

function stopAnimation(){
  animationStarted = false;
  $(".the-box").stop();
  $(".the-box").css("background-color","white");
}

$.fn.isOnScreen = function(){

    var win = $(window);

    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

};



function randomColor(){return '#'+Math.floor(Math.random()*16777215).toString(16);}

来源：https://stackoverflow.com/questions/24803195/viewport-jquery-change-document-ready-to-if-element-is-in-viewport