Tag: jquery waypoints

如何在航点function内滚动动画？

当用户向下滚动时，我有从屏幕左侧和右侧出现的图像。 使用divPosition = $(‘div’).offset().top; 获取包含元素的位置我从scrollValue = $(document).scrollTop();减去该值scrollValue = $(document).scrollTop(); 并将值应用于绝对定位图像上的左侧位置。 包含div的偏移量是在刷新和resize时计算的。 在不调整窗口大小的情况下， x=scrollValue – divPosition随刷新页面的滚动距离而变化。 我希望它保持一致。 有没有更好的方法来使这种类型的动画工作。 例如，是否可以使用垂直滚动作为带有航点的x值来触发动画？ window.onresize=function(){ divPosition = $(‘div’).offset().top; }; $(document).scroll(function(){ scrollValue = $(document).scrollTop(); x = scrollValue – divPosition; } 这是该网站的链接。 当我发现问题的原因时，我会在这个问题中发布相关的代码部分。 http://www.otherdewi.com/gg.html

使用JQuery预加载图像以获得图像的主色

我创建了以下测试页面： http ：//methodus.de/wp/ 它获得每篇博文的图像的主色，并在向下滚动页面时将它们用于动画。 不幸的是，只要图像没有完全加载，就无法计算颜色（请参阅javascript警报）。 那时动画不起作用。 当我重新加载页面时，浏览器缓存的图像和一切都像魅力一样。 相关代码是： $(‘.bg’).each(function(index) { var url = $(this).data(‘background-image’); img = new Image(); img.src = url; averageColours[url] = getAverageColourAsRGB(img); $(this).css(‘background-image’, ‘url(‘ + url + ‘)’); }); $(‘.bg’).waypoint(function() { var url = $(this).data(‘background-image’); var colour = getPreloadedAverageColourAsRGB(url); console.log(url + ‘ ‘ + colour.r + ‘,’ + colour.g + ‘,’ + colour.b); […]

Waypoint没有处理溢出：隐藏;

小提琴 如果你从小提琴中的.wrapper中删除overflow属性， .wrapper waypoints就可以了。 但不是hidden在x或y overflow 这是代码： HTML： dfa fdasfsdafd as dfa fdasfsdafd as dfa fdasfsdafd as dfa fdasfsdafd as CSS： html, body, .wrapper, .section{ height:100%; } .wrapper{ overflow-x: hidden; overflow-y: auto; } JS： $(‘#sec3’).waypoint(function(direction) { $(‘#sec3’).css({ backgroundColor: “#f99” }); }); 任何jQuery或css解决方案？

通过单击向上滚动时，jQuery Waypoints粘性导航是1px关闭

我接近用Waypoints撕掉我的头发。 首先，我远没有体验过javascript。 我正在使用Waypoints来1）将导航到某个点的屏幕顶部（这很好）和2），在到达某些部分时突出显示导航项。 除非您单击需要航点指示方向的导航项目，例如单击“特殊值”然后单击“目标”，否则一切都会正常工作。 您会注意到航点似乎是一个像素关闭，“exception值”仍然突出显示。 如果向上滚动像素，“目标”最终会突出显示。 这是复制此行为的唯一方法…单击向下滚动的导航项工作正常。 这是我的JS： http ： //jsfiddle.net/TreUd/ 。 以下是它实施的网站： http ： //ifb.thepinkrobot.com/ 。 感谢您的帮助…非常感谢。 $(document).ready(function(){ $(‘.nav-container’).waypoint(function(direction) { $(‘nav#main’).toggleClass(‘sticky’, direction === ‘down’); }); }); var sections = $(“section”); var navigation_links = $(“nav a”); sections.waypoint({ handler: function(event, direction) { var active_section; active_section = $(this); if (direction === “down”) active_section = active_section.prev(); var active_link […]

为什么（jQuery）Waypoints“bottom-in-view”对隐藏元素不起作用？

我试图使用jQuery和Waypoints（formely jQuery Waypoints）在用户向下滚动时动态显示隐藏的图像。 我发现我可以非常轻松地向一个元素添加一个航点，并在元素“在视图中”时触发处理程序（在底部视图中设置偏移属性）。 但是，尝试使用相同的属性对隐藏元素不起作用：在加载页面后立即触发处理程序。 例如：当它们进入视口时隐藏已经显示的元素很容易。 （ 例1：jsFiddle ）： var waypoints = $(‘.dynamic’).waypoint({ handler: function (direction) { $(this).hide(700); }, offset: ‘bottom-in-view’ }); 但是，我想做的是相反的：当我们滚动到它的位置时显示一个隐藏的元素。 下一个示例不起作用，因为处理程序在window.load（）事件之后立即触发，而不是等待用户向下滚动。 （ 例2：jsFiddle ）： var waypoints = $(‘.dynamic’).waypoint({ // these elements are display: none handler: function (direction) { $(this).show(700); }, offset: ‘bottom-in-view’ }); 我找到了解决办法。 我使用一个空的（但不是隐藏的）div来附加航点。 然后，当我向下滚动到上述div时，航点被执行。 在div的处理程序中，我使用jQuery来显示其他元素。 （ 例3：jsFiddle ）： var waypoints […]

jquery waypoints hilighting navigation

我正在学习使用jQuery waypoints创建一个带有粘性标题的单页网站的教程。 http://webdesign.tutsplus.com/tutorials/javascript-tutorials/create-a-sticky-navigation-header-using-jquery-waypoints/ 一切正常，直到我对我的HTML结构做了一些改动。 我将导航放在我的“约”部分下面，该部分附在航点上。 在我的导航下，还有另一个没有附加到航点的部分，因为它的内容仍属于我的“约”部分。 然后是另外两个连接到航路点的部分。 我的粘性function和我的滚动function工作正常，但突出显示关于部分的问题，因为我将导航放在id=”about”的部分下 我这里有一个jsFiddle： http ： //jsfiddle.net/8GENv/ 我很确定问题出现在以下代码中： var sections = $(“.waypointsec”); var navigation_links = $(“.navigation .innernav ul li a”); sections.waypoint({ handler: function(event, direction) { var active_section; active_section = $(this); if (direction === “up”) active_section = active_section.prev(); var active_link = $(‘.navigation .innernav ul li a[href=”#’ + active_section.attr(“id”) + ‘”]’); navigation_links.removeClass(“selected”); […]

jquery使用waypoint获取元素的id

我使用jquery waypoints（ http://imakewebthings.com/jquery-waypoints/#docs ）检查一个元素是否是浏览器的视图，这里是html： 1. Container 2. Container 3. Container 4. Container 这里是js $(‘#container_1’).waypoint(function() { console.log(“container 1 is visible”); }); 这很好用！ 但是有可能找出视图中的元素的当前id并且路点被触发吗？ 像这样的东西： $(‘.container’).waypoint(function() { console.log(“id of element: ” + $(this).attr(‘id’); }); 谢谢！

使用多个类的JQuery航点

我正在使用http://imakewebthings.com/jquery-waypoints并且有5个class级（职员），目前，当获得第一堂课时，航点会立即触发所有class级。 如何进行分级以便我可以在您通过列表时添加？ jQuery的 $(‘.staffmember’).waypoint(function(direction) { jQuery(‘.staffmember’).addClass(‘on’).next(); }); 谢谢

jQuery Waypoints错误：粘滞方法不存在

我想使用jQuery Waypoints插件将一个元素粘贴到WordPress页面的顶部。 $(‘#myelement’).waypoint(‘sticky’); 但控制台说： 错误：jQuery Waypoints中不存在sticky方法。 我错过了什么吗？

如何在加载时隐藏动画元素？

我在着陆页中使用带有waypoints.js的 animate.css 。 我想在用户滚动页面时为元素设置动画。 但是，问题是我需要在动画开始之前隐藏元素（如果我不隐藏，animate.css首先隐藏元素然后动画，看起来非常难看）。 但是，我通过在我的CSS中添加两个类来解决问题，但它产生了另一个问题。 .visible{ opacity: 1; } .invisible {opacity: 0; } // I added following jquery code $(‘elem’).removeClass(‘invisible’).addClass(‘visible fadeInUp’); 这在我向元素添加animation-delay之前一直有效。 这是我想要实现的解释。 我有这样的元素： element1 element2 element3 我想为每个元素添加动画延迟，以便它们使用animation-delay属性在每个元素中以指定的秒数相互fadeInUp 。 我不能让这个工作。 我尝试使用代码而不使用动画延迟但没有成功。 $(‘elem’).each(function() { // code with delay using timeout setTimeout(function(){ $(this).removeClass(‘invisible’).addClass(‘…’); }, 100); }); 如果我的方法完全错误，请告诉我？ 如果是，那么你可以提供更好的方法来完成。