0

I've been playing around with the jquery plugin waypoints. I would like to have this element fade in when is browser view and fade out when not but I haven't been able to figure it out. The element I'm using is an with position: absolute. I'm not sure whether that will effect the script or not.

Here's the JSFiddle http://jsfiddle.net/LvjoLuvx/2/ on what I'm working with. waypoints.js is linked in the external resources.

HTML

<li id="span">

    <img class="logo"></img>

</li>

CSS

#span{
    height: 2000px;
    list-style: none;
}

.logo{
    width: 20%;
    height: 30%;
    background-color: blue;
    margin-left: 40%;
    position: absolute;
}

JQUERY

$('.logo').waypoint(function(event, direction) {
    // Fade in here
    $(this).fadeIn(800);
}, {
   offset: function() {
       // The bottom of the element is in view
       return $.waypoints('viewportHeight') - $(this).outerHeight();
    }
});
Ed Lewis
  • 33
  • 10
  • 3
    I see no point in hiding something that can't be seen – Dale Sep 01 '14 at 12:24
  • @Dale Hiding might be relevant so that your pages vertical size gets smaller but the fade effect is meaningless if the user can not see it :) – Esko Sep 01 '14 at 12:28
  • take a look at this post: http://stackoverflow.com/a/9335517/1876355 then you will understand how to see whether something is in view point (visible to the user) or not, then google something like `get Element top left corner`, after that, When you have the points (And the width) of the element, you can simply do an if statement to see if you can hide the element or not. – Pierre Sep 01 '14 at 12:34
  • @ Dale It's so I can have all the elements I want fade-in at whatever point I want. – Ed Lewis Sep 01 '14 at 13:55

0 Answers0