我有下一个代码,当滚动到达类.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>
答案 0 :(得分:0)
您需要在结束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.');
});
});
&#13;
<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>
&#13;
答案 1 :(得分:0)
无需使用插件。看看这有多容易:
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;
});
&#13;
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;}
&#13;
<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>
&#13;