我想在有人向下滚动一个元素时运行一个函数.像这样的东西:
$('div').scrollDown(function(){ alert('down') });
$('div').scrollUp(function(){ alert('up') });
但这些功能不存在.有这个问题的解决方案吗？他们似乎能够做到这一点.不幸的是源代码是压缩的,所以没有运气......
谢谢!!
想象一下这是我的页面:
<p>hello</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p class="myPara">My Paragraph</p>
当用户向下滚动到具有"myPara"类的段落而不是之前,我如何提醒消息？
在滚动到页面上的特定位置后,我花了一整天时间寻找一种简单的方法来启动动画.
我的css
.animation {
width: 50%;
float: left;
position: relative;
-webkit-animation-name: test;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 3;
-webkit-animation-fill-mode: forwards;
animation-name: test;
animation-duration: 4s;
animation-iteration-count: 1;
animation-fill-mode: forwards; }
还有我的HTML
<div class="container">
<div class="animation">
Content goes here...
</div>
</div>
我想知道当我滚动到类容器时如何使动画开始.
我想要从导航栏中选择部分或在滚动时查看部分时启动此动画.
示例代码:
HTML:
<section id="section-skills" class="section appear clearfix">
<div class="container">
<div class="row mar-bot40">
<div class="col-md-offset-3 col-md-6">
<div class="section-header">
<h2 class="section-heading animated" data-animation="bounceInUp">Skills</h2>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row" >
<div class="col-md-6">
<div class="skillbar clearfix " data-percent="80%">
<div class="skillbar-title" style="background: #333333;"><span>Java</span></div>
<div class="skillbar-bar" style="background: #525252;"></div>
<div class="skill-bar-percent">75%</div>
</div> <!-- End Skill Bar -->
<!--REST OF THE CODE FOLLOWS AS IN THE EXAMPLE LINK PROVIDED-->
</section>
我尝试waypoint在jQuery中使用,但它不起作用.
jQuery(document).ready(function(){
$('#section-skills').waypoint(function(direction) {
jQuery('.skillbar').each(function(){
jQuery(this).find('.skillbar-bar').animate({
width:jQuery(this).attr('data-percent')
},6000);
});
});
});
任何解决方案都会非常有用.
我的页面上有不同的部分,如下所示:
<div class="red" data-section="Section Red"></div>
<div class="blue" data-section="Section Blue"></div>
<div class="yellow" data-section="Section Yellow"></div>
<div class="green" data-section="Section Green"></div>
还有一个单独的div:
<div class="current_div"></div>
该div始终位于页面顶部.如何使用当用户滚动到blue(或任何其他)div时,current_div将更改为:
<div class="current_div">Section Blue</div>
这是我的标记的小提琴:https://jsfiddle.net/wb7L954v/1/
必须有一个简单的方法来获得该data-section部分,并简单地把它放在该div中？
当我想要应用类的元素进入视口时，有没有办法添加类？或者当屏幕底部超过元素顶部一定距离时？
现在我有我想要使用这样的效果：
if ($(document).scrollTop() > 100) {
$(".graph-line.two").addClass("graph-75");
问题在于它是相对于文档高度的，所以当我缩小页面（或在移动设备上查看）并且元素堆叠在一起时，页面变得更高并且类（动画）在元素进入视野。
我看到其他人提出了类似的问题，我试图实施他们得到的答案，但我无法得到任何帮助，因此将不胜感激。
这就是我所拥有的：
if ($(document).scrollTop() > 100) {
$(".graph-line.two").addClass("graph-75");
$(document).ready(function() {
$(".graph-line.one").addClass("graph-75");
$(".graph-line-2.one").addClass("opacity");
$(window).scroll(function() {
if ($(document).scrollTop() > 100) {
$(".graph-line.two").addClass("graph-75");
$(".graph-line-2.two").addClass("opacity");
}
if ($(document).scrollTop() > 450) {
$(".graph-line.three").addClass("graph-75");
$(".graph-line-2.three").addClass("opacity");
}
if ($(document).scrollTop() > 800) {
$(".graph-line.four").addClass("graph-75");
$(".graph-line-2.four").addClass("opacity");
}
if ($(document).scrollTop() > 1150) {
$(".graph-line.five").addClass("graph-75");
$(".graph-line-2.five").addClass("opacity");
}
if ($(document).scrollTop() > 1500) {
$(".graph-line.six").addClass("graph-75");
$(".graph-line-2.six").addClass("opacity");
}
});
});.graph {
display: block;
margin: 100px auto;
transform: rotate(-90deg);
will-change: transform;
}
.graph-line {
stroke-dasharray: …我只想在向下滚动时增加值,在向上滚动时减少.
这是HTML:
<html>
<head>
<script src="/jquery.min.js"></script>
<script src="9.js"></script>
<style>
#addit
{
position:fixed;
top:0px;
left:0px;
}
</style>
</head>
<body>
<div id="addit">
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br>
</body>
</html>
这是jQuery代码:
$(window).scroll(function(){
var x=1;
x=x+1;
$("#addit").html(x);
});
由于我是jQuery的新手,我无法找到它的方法!有人可以帮忙吗？