jquery-waypoints

问题 I was following a tutorial on creating a single page website with a sticky header using jQuery waypoints. http://webdesign.tutsplus.com/tutorials/javascript-tutorials/create-a-sticky-navigation-header-using-jquery-waypoints/ Everything worked fine until I made a little change to my HTML structure. I placed the navigation under my "about" section which is attached to a waypoint. Under my navigation there's another section which is not attached to a waypoint, since its content still belongs to

问题 Fiddle If you remove overflow property from .wrapper in fiddle, waypoints will work fine. But not with overflow hidden in x or y Here is the code: HTML: <div class="wrapper"> <div id="sec1" class="section">dfa fdasfsdafd as</div> <div id="sec2" class="section">dfa fdasfsdafd as</div> <div id="sec3" class="section">dfa fdasfsdafd as</div> <div id="sec4" class="section">dfa fdasfsdafd as</div> </div> CSS: html, body, .wrapper, .section{ height:100%; } .wrapper{ overflow-x: hidden; overflow-y:

问题 I can't use waypoints with RequireJS although everything looks good. Here is my code: http://jsfiddle.net/7nGzj/ main.js requirejs.config({ "baseUrl": "theme/PereOlive/js/lib", "paths": { "app":"../app", "jquery": "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min" }, "shim": { "waypoints.min": ["jquery"] } }); requirejs(["app/common"]); common.js define([ 'jquery', "waypoints.min", ], function () { $(function () { console.log($.waypoints); $('#loading').waypoint(function (direction) {

问题 I am trying to follow this SO answer to create an infinite scrolling technique. In my example code, why is it not working? I would like to simulate that content be loaded each time I reach the bottom. Currently it only works a finite amount. After reading docs I believe that I am not refreshing correctly. I suspect the recalculation of the "trigger point" isn't firing. I am not sure how to make it work. In my example, I am simulating new content being loaded by calling the getMore() function

问题 So I'm trying to work on the super thin documentation of this plugin http://imakewebthings.com/waypoints/ Pretty simple stuff, everytime my footer is in view, I fetch new elements via ajax and append them. Except once a waypoint has been hit once, it won't run again, what am I doing wrong? $('#footer').waypoint(function (direction) { var $appender = $('.more_timeline').last(); var data = {}; var $wrapper = $('.container'); var $yearwrapper = $wrapper.find('.year').last(); data.current_year =

问题 I tried to work with waypoints.js and make menu element active, when user scroll to it. As I can see, waypoints works well, but I can't get current section id ... Console always said undefined . So, what I'm doing wrong? My script is: jQuery(function() { var sections = jQuery('section'); var navigation_links = jQuery('nav a'); sections.waypoint({ handler: function(direction) { var active_section; active_section = jQuery(this); if (direction === "up") active_section = active_section.prev();

问题 I have images that appear from the left and right of the screen as the user scrolls down. Using divPosition = $('div').offset().top; to get the position of the containing element I subtract the value from scrollValue = $(document).scrollTop(); and apply the value to position left on an absolutely positioned image. The offset of the containing div is calculated on refresh and resize. Without resizing the window the x=scrollValue - divPosition varies on refresh depending how far the page is

问题 I am using waypoint and it send me this message: Uncaught TypeError: Cannot read property 'each' of undefined this is how I got the code with vue.js + rails: <template> <div id="playerContainer final"> <iframe src="xxxxxxxxx" allowfullscreen></iframe> </div> </template> <script> require('waypoints/lib/jquery.waypoints.min.js') export default { mounted(){ var ele new Waypoint({ element: ele = document.getElementById('final'), handler: function(direction) { if (direction == 'down') { $(ele)

问题 I have an element, that is sticked to the bottom of the page using waypoints.js and the following code: $('.sticky-container').waypoint(function (direction) { if (direction == 'down') { $(this).addClass('active'); } else { $(this).removeClass('active'); } },{offset:'100%'}); This works fine, but I also have accordions on my page - when I open the accordion item, the page height changes, but the change isn't reflected in the waypoint script and the sticky element disappears too soon. I created

问题 I have multiple sections with the class blockList li throughout each of these sections. How am I able to trigger only the current blockList li items for the ones that are in view? Currently, once any of the list items are in view they all fire throughout the page, even though they are not in view. The snippet below illustrates the issue I am having. $('.blockList').waypoint(function() { $('.blockList li').each(function(index) { setTimeout(()=>{ $(this).addClass('active'); }, 200*index); }); }