个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
我正在使用 jQuery 航路点插件。以下内容工作正常，除了在页面加载时控制台消息在我滚动之前被触发。如果我删除应用于图像的显示 block ，这将停止，但我的网站需要它才能工作。
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="js/jquery-2.0.3.js"></script>
<script src="js/waypoints.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
display: block;
margin: auto;
}
#img3 {
opacity: 0.5;
}
</style>
<script>
$(document).ready(function() {
$('#img3').waypoint(function() {
console.log('Basic example callback triggered.');
});
});
</script>
<body>
<img src="images/1.jpg" alt="image 1" id="img1">
<img src="images/2.jpg" alt="image 2" id="img2">
<img src="images/3.jpg" alt="image 3" id="img3">
<img src="images/4.jpg" alt="image 4" id="img4">
</body>
</html>
最佳答案
您的图片在开始加载之前没有宽度/高度。在 domready 事件期间，在您的图像开始加载之前，您正在实例化航路点。那时，因为它们没有宽度/高度，所以您所有的图像都位于页面上的 y 坐标 0 处，这就是路点触发的地方。您至少可以通过两种方式解决此问题:
$(window).load 处理程序中创建路径点，该处理程序将等待所有图像完成加载。当图像是内联时没有发生这种情况的原因是 0x0 img 元素位于 body 的 line-height 文本框内，因此 img 距离顶部有一些小像素而不是确切的顶部。
关于jquery-waypoints - 当图像显示 block 时，jQuery Waypoints 在页面加载时触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18104033/
28
4
0
我正在使用 jQuery 航路点插件。以下内容工作正常，除了在页面加载时控制台消息在我滚动之前被触发。如果我删除应用于图像的显示 block ，这将停止，但我的网站需要它才能工作。
我最近在我的项目中将 jquery-waypoints 从 2.x 升级到 3.x，发现我的很多代码都坏了。所有对 $(this) 的引用在我的处理程序中必须更改为 $(this.element)一旦
在尝试实现来自 http://imakewebthings.com/waypoints/shortcuts/infinite-scroll/ 的 Waypoints 无限滚动示例时遇到问题. 这是一个
我正在使用 waypoint 版本 3.1.1 和 jquery 版本，还使用粘性快捷方式并将其作为我的调用代码 $('.navWrap').waypoint('sticky', { direct
我正在使用 JQuery Waypoint 滚动左侧导航。如何在页脚之前停止滚动？ var $jq = jQuery.noConflict(); $jq(document).ready(functi
我正在尝试使用 jquery-waypoint 插件在页脚进入/离开视口(viewport)时触发事件。 我在 jsfiddle 上创建了一个示例但该事件不会在页脚元素上触发。 有什么建议吗？ 最佳答
我正在学习有关使用 jQuery 路径点创建带有粘性标题的单页网站的教程。 http://webdesign.tutsplus.com/tutorials/javascript-tutorials/c
我在使用 waypoint 插件时遇到问题，就像 http://webdesign.tutsplus.com/tutorials/javascript-tutorials/create-a-stick
如果有这样的代码 var waypoint = new Waypoint({ element:document.getElementsByClassName ('waypoint'), ha
我有一个很好的 Waypoint.js 滚动列表，当您向下滚动并从目标(窗口)点击一定百分比时，它会更改字体样式并向列表项添加一个箭头。 现在，它在向下的过程中为每个元素添加箭头，并在向上
我希望在 jquery waypoint 中有 2 个偏移量。目前只有一个，相同的，用于向上和向下滚动。 我使用的是 25% 的“向下”偏移，并且想要“75%”的“向上”偏移。因此，当 block 的
我正在尝试使用 Waypoints library . 我的用例是，我需要检测用户何时阅读页面的 20%、40% 等。 然而，该库的工作方式似乎有所不同，因为它会检测某个 DOM 元素何时进入 Vie
在我的代码中，我希望在滚动的每个部分上元素都可见，但这并没有发生。在第一部分中，它工作正常，但在第二部分中则不然，我实际上也在使用 fullpage.js。但除了第二部分的 waypoint.js 之
当用户滚动时，我在元素上使用 Waypoints 和 Animate.css。它看起来和工作都很好，但是我的 JS 文件看起来很困惑，因为我还必须使用 JS 添加类，因为它们不能出现在这个项目的标记中
我正在加载“jquery.waypoints.min.js”(当我使用网络分析工具查看时似乎加载正确)，但这个简单的脚本没有任何反应: $(document).ready(function() {
我正在尝试实现 jQuery Waypoints 插件，以便在任何具有 .foo 类的元素进入视口(viewport)时将 .active 类添加到该元素: var inview = new Wa
我使用 jQuery Waypoints 插件和粘性附加组件来锁定窗口底部的表单提交部分，直到滚动到表单底部时自然显示该部分。 出于设计/风格的原因，我需要粘性版本具有跨越整个窗口的顶部边框，而当该部
我正在使用 waypoints.js在项目中每当列表元素可见时触发事件。唯一的问题是，似乎什么都没有发生 - waypoint.reached 事件似乎没有触发。 文件 (waypoints.js)
我正在尝试使用 JQuery Waypoints 来制作变色标题。我有一组对象显示单页网站的各个部分及其相关颜色(见下文): var colours = new Array( {section
标题基本上就是这么说的。我在 offset 参数中输入什么并不重要，它只会在元素到达窗口顶部时触发。 $('.waypoint').waypoint({ handler: funct
我是一名优秀的程序员,十分优秀！