Jquery .waypoint不工作
Jquery .waypoint不工作
提问于 2016-06-28 00:43:17
我有下一个代码，我需要的是当滚动到类.ua时，以显示警报。但什么都没发生。我还检查了脚本的路径，.addClass之类的东西也很好地工作。
$(document).ready(function() {
$('.ua').waypoint(function() {
alert('Top of header hit top of viewport.');
});
});<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First one</title>
<link rel="stylesheet" type="text/css" href="css/grid.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<nav class="main-nav">
</nav>
<div class="main-div">
</div>
<div class="ua">
<h1>HOLAA</h1>
</div>
<script src="jq/jq.js"></script>
</body>
</html>
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-06-28 01:10:28
不需要使用插件。看看这有多简单：
pastit = false;
wayloc = $('.ua').position().top;
$(window).scroll(function(){
pos = $(window).scrollTop();
$('#msg').html(pos); //UNNECESSARY - For Demo Only
if ( !pastit && pos > 500){
pastit = true;
$('body').css('background','palegreen');
}else if (pastit && pos < 500){
pastit = false;
$('body').css('background','white');
}
});
// Necessary for stack snippets window to work Full Screen
$(window).resize(function(){
wayloc = $('.ua').position().top;
});html,body{min-height:2000px;}
.main-nav{width:100vw;height:250px;}
.main-div{width:100vw;height:500px;}
.ua {width:100vw;height:30px;background:wheat;border:1px solid orange;}
/* Unnecessary - For Demo Only */
#msg{position:fixed;top:50px;left:70%;padding:10px;min-width:50px;text-align:center;background:wheat;border:1px solid orange;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="msg"></div><!-- Unnecessary For Demo Only-->
<nav class="main-nav"></nav>
<div class="main-div"></div>
<div class="ua">
<h1>HOLAA</h1>
</div>
Stack Overflow用户
发布于 2016-06-28 00:56:23
您需要在结束的jQuery标记之前包含waypoint head插件
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.js"></script>
$(document).ready(function() {
$('.ua').waypoint(function() {
alert('Top of header hit top of viewport.');
});
}); <link rel="stylesheet" type="text/css" href="css/grid.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.js"></script>
<nav class="main-nav">
</nav>
<div class="main-div">
</div>
<div class="ua">
<h1>HOLAA</h1>
</div>
<script src="jq/jq.js"></script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38065347
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号