jquery-waypoints

问题 i'am using jquery waypoints (http://imakewebthings.com/jquery-waypoints/#docs) to check if an element is the view of the browser, here the html: <div class="container" id="container_1">1. Container</div> <div class="container" id="container_2">2. Container</div> <div class="container" id="container_3">3. Container</div> <div class="container" id="container_4">4. Container</div> here the js $('#container_1').waypoint(function() { console.log("container 1 is visible"); }); this works fine! But

问题 I was trying to use jQuery & Waypoints (formely jQuery Waypoints) to dynamically show hidden images when a user scrolls down. I found out that I can quite easily add a waypoint to an element and have the handler triggered when the element is "in view" (with the offset property set at bottom-in-view). However, trying to use the same property doesn't work on an hidden element: the handler is triggered right after the page is loaded. E.g.: hiding already-displayed elements when they get in the

问题 I recently upgraded jquery-waypoints from 2.x to 3.x in my project and found that a lot of my code broke. All references to $(this) within my handlers had to be changed to $(this.element) which, once I figured out was the cause of my troubles, was easy enough to fix. I haven't been able to figure out what happened to the triggerOnce option which would prevent a waypoint from firing multiple times. Any idea why this was removed and how can I achieve the same functionality? 回答1: I know an

问题 I recently upgraded jquery-waypoints from 2.x to 3.x in my project and found that a lot of my code broke. All references to $(this) within my handlers had to be changed to $(this.element) which, once I figured out was the cause of my troubles, was easy enough to fix. I haven't been able to figure out what happened to the triggerOnce option which would prevent a waypoint from firing multiple times. Any idea why this was removed and how can I achieve the same functionality? 回答1: I know an

问题 I have a logo that starts in with a basic SVG animation. When a user scrolls down it fires off another animation that pushes the logo sideways and shows part of the logo. When you scroll back up, the logo slides back into view. This all works great! The Issue If I reload the page half way down, or (which is odd) hover on a link, the animation restarts so the logo is visible and covering content. This is obviously not the desired effect. The Question Is there any way I can say offset 20% FROM

问题 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 />

问题 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 />

问题 i'll love to have 2 offsets in jquery waypoint. Currently there is only one, the same, for up and down scrolling. I'm using a "down" offset of 25%, and would like an "up" offset of "75%". So when the top of a block is at 25% of the top of the viewport and the scolling is goin down, 'down' is triggered. And when the top of a block is at 75% of the top of the viewport and the scolling is goin up, 'up' is triggered. Anyone has already writen code for this hysteresis ? 回答1: You can do this by

问题 An element <div class=""> will fade in when the user scroll down to that div. I found a solution using a jQuery plugin and another solution to check whether the div is visible on the page. It works. However, as soon as user scroll to the top of div, it fades in too soon so user doesn't get to see the div fade in. How do I make the div fade-in ONLY if the user scrolls to the bottom of the div so that user can see a nice fade-in effect for the whole div? 回答1: you mentioned that you used a

问题 I have two different objects I'm using to trigger two different Waypoints events which then trigger Velocity.js (a fade in/out library). The first even (the one on secondary ) should fire eternally, up and down and every time. The second however, on .process should only fire once and then never again until the page is reloaded. When I insert .destroy(); in the second function, it shuts off all waypoints events for the entire page. Any idea why? Page in reference: http://www.goodcorps.com/ if