18

Please see this:

http://jsfiddle.net/5Zs6F/2/

As you can see only when you scroll past the first red rectangle it turns blue, I would like it to turn blue the moment it enters into view. This is why the second never turns blue because there isn't enough content underneath it to allow you to scroll past it.

HTML:

Scoll this window pane
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="box"></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="box"></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

CSS:

.box { width: 250px; height: 100px; border: 2px solid red;  }

jQuery:

$.getScript('http://imakewebthings.com/jquery-waypoints/waypoints.min.js', function() {


    $('.box').waypoint(function() {

        $(this).css({
            borderColor: 'blue'
        });

    });


});

How to make it fire as soon as the element in question is seen and not scrolled past?

Anirvan
  • 6,214
  • 5
  • 39
  • 53

4 Answers4

41

The offset option determines where in relation to the top of the viewport the waypoint should fire. By default it is 0, so your element fires when it hits the top. Because what you want is common, waypoints includes a simple alias for setting the offset to fire when the whole element comes into view.

$('.box').waypoint(function() {
  $(this).css({
    borderColor: 'blue'
  });
}, { offset: 'bottom-in-view' });

If you want it to fire when any part of the element peeks in from the bottom, you should set it to '100%'.

imakewebthings
  • 3,388
  • 1
  • 23
  • 18
  • @imakewebthings Sorry i didnt knew how to contact you on stackoverflow but i am strugling with something related to Waypoints can you please take a look? **[CLICK HERE](http://stackoverflow.com/questions/23563016/waypoint-not-working-on-overflowhidden)** – Imran Bughio May 09 '14 at 11:08
  • I thing you can more clearly know about waypoint if you read this article. http://www.script-tutorials.com/scrollbar-jquery-event-handling-using-waypoints/ @tk123 – Bipon Biswas Feb 06 '15 at 20:05
  • I recommend either not using the tutorial bipon has linked or taking it with a large grain of salt. It was written almost 4 years ago and is several major versions out of date. – imakewebthings Feb 06 '15 at 21:05
  • hi I know this is an old question now, but I was wondering if there is a way to have the offset set to the top on the way down and the bottom on the way up without creating two separate waypoints? – kai Taylor Feb 18 '15 at 19:52
  • @kaiTaylor No, but it does sound like you may want to use [Waypoint.Inview](http://imakewebthings.com/waypoints/shortcuts/inview/), which gives you the methods `enter`, `entered`, `exit`, and `exiting` which fire regardless of which side those things happen on. – imakewebthings Feb 24 '15 at 05:28
0

Won't work for me. I have serveral classes with the same name and they will all changed if the page loads / first element is on screen.

jQuery(document).ready(function(){

jQuery('.zoomInDownInaktiv').waypoint(function() {
    //jQuery(this).removeClass('zoomInDownInaktiv');
    jQuery(this).addClass('zoomInDown');
}, { offset: 'bottom-in-view' });

});

Paul
  • 11
  • 1
0

OK. Found a solution which works fine.

    jQuery('.zoomInDownInaktiv').waypoint(function(direction) {
    if (direction === "down") {
        jQuery(this.element).removeClass('zoomInDownInaktiv');
        jQuery(this.element).addClass('zoomInDown');
    }
}, { offset: '80%' });
Paul
  • 11
  • 1
0

If you want to solve this issue with css then also you can do it by using below css.

img[data-src]::before {
    content: "";
    display: block;
    padding-top: 70%;
  }

We are trying to use pseudo-elements (e.g. ::before and ::after) to add decorations to img elements.

Browsers don't render an image’s pseudo-elements because img is a replaced element, meaning its layout is controlled by an external resource.

However, there is an exception to that rule: If an image’s src attribute is invalid, browsers will render its pseudo-elements. So, if we store the src for an image in data-src and the src is empty, then we can use a pseudo-element to set an aspect ratio:

As soon as the data-src becomes the src, the browser stops rendering ::before and the image's natural aspect ratio takes over.

chiku
  • 60
  • 6