我希望在jquery waypoint中有2个补偿.目前上下滚动只有一个相同.

我正在使用25%的"向下"偏移,并希望"向上"偏移"75%".因此,当一个块的顶部位于视口顶部的25%并且scolling正在向下时,触发"向下".当一个块的顶部位于视口顶部的75%并且晃动时,就会触发"向上".

任何人都已经为这种滞后写了代码？

请看这个:

http://jsfiddle.net/5Zs6F/2/

正如你只能看到滚过第一个红色矩形时它变成蓝色,我希望它在进入视图时变成蓝色.这就是为什么第二个永远不会变成蓝色,因为它下面没有足够的内容允许你滚过它.

HTML:

Scoll this window pane
<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 /> …

我在着陆页中使用带有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元素之前,这很有效.这是我想要实现的解释.我有这样的元素:

<ul>
 <li>element1</li>
 <li>element2</li>
 <li>element3</li>
</ul>

我想为每个元素添加动画延迟,以便它们fadeInUp 在每个元素之后使用animation-delay属性指定秒数.我不能让这个工作.我尝试使用代码而不使用动画延迟但没有成功.

$('elem').each(function() {
  // code with delay using timeout
  setTimeout(function(){
   $(this).removeClass('invisible').addClass('...');
  }, 100);
});

如果我的方法完全错误,请告诉我？如果是,那么你可以提供更好的方法来完成.

<div class="">当用户向下滚动到该div时,元素将淡入.

我找到了一个使用jQuery插件的解决方案和另一个解决方案来检查div是否在页面上可见.有用.

但是,只要用户滚动到div的顶部,它就会很快消失,因此用户无法看到div淡入.如果用户滚动到底部,我该如何使div淡入？ div让用户可以看到整个div的漂亮淡入效果？

我使用航路点js来检测元素何时在视口中.

http://imakewebthings.com/jquery-waypoints/

https://github.com/imakewebthings/waypoints

是否可以检测元素顶部何时位于视口底部？

干杯

柯

使用http://imakewebthings.com/jquery-waypoints做一些快速的工作 我需要在用户向下滚动到区域类div1时执行一些操作,但只需要执行一次,而不是每次用户滚动到该位置时 - 只有一次

$('.div1').waypoint(function(direction) 
{
    alert(CARRY OUT MY ACTION);
});

这只需要在第一次滚动到该部分时 - 向上或向下.

我正在使用http://imakewebthings.com/jquery-waypoints并且有5个班级(工作人员),目前,当获得第一堂课时,航点会立即触发所有班级.如何登台以便我可以在您通过列表时添加？

<ul id="staff">
<li class="staffmember"></li>
    <li class="staffmember"></li>
    <li class="staffmember"></li>
    <li class="staffmember"></li>
    <li class="staffmember"></li>
</ul>

jQuery的

$('.staffmember').waypoint(function(direction) {
jQuery('.staffmember').addClass('on').next();
});

谢谢

我正在使用路标创建一个粘性div的页面,该div向下滚动页面的位置:固定直到它到达其父div的底部.代码即时使用按预期工作,直到$ .waypoints('refresh')被调用,然后粘性div跳回到页面顶部并失去其固定位置.

下面是代码:

$('#content').waypoint(function(event, direction){
if (direction === 'down') {
    $(this).removeClass('sticky').addClass('bottomed');
}
else {
    $(this).removeClass('bottomed').addClass('sticky');
}
}, {
    offset: function() {
    return $('#leftCol').outerHeight() - $('#content').outerHeight();
}

}).find('#leftCol').waypoint(function(event, direction) {
    $(this).parent().toggleClass('sticky', direction === "down");
    event.stopPropagation();
         });        

其中#leftCol是向下滚动页面的div,而#content是其父div.

我有的CSS是:

#content {
width: 975px;
height: auto;
position: relative;
margin-top: 10px;
margin-bottom: 20px;
min-height: 800px;
}

#leftCol {
position: absolute;
width: 974px;
}

.sticky #leftCol {
position:fixed !important;
top:0 !important;
left: 50% !important;
width: 974px !important;
margin-left: -488px;
}

.bottomed #leftCol {
position: absolute …

第一次向下滚动时,我的航路点以100%触发.Html被附加到航点上方的div#mylist.向上滚动页面然后再向下滚动,它会追加更多内容.几次之后,值得注意的是,航点不再在100%的页面滚动时触发,而是几乎在任何附加之前div#waypoint开始的地方.您可以看到滚动条如何缩小航点被击中.您还可以看到div#mywaypoint始终位于底部.

如何在每次追加后每次都以100%的速度行动？

这是jsFiddle

代码
我有一个航点设置为100%触发.我有两个div.一个用内容,另一个用来触发航点.

$('#mywaypoint').waypoint(function (direction)
{
    if (direction != "down") return;
    for(var i = 0; i < 20; i++)
    {
        $('#mylist').append(i + ' - goodbye<br />');
    }
    $('#mylist').append('------<br />');
}, { offset: '100%' });

<div id="mylist"> 
    // {repeated 20 or more times as initial html}
    hello<br />
</div>
<div id='mywaypoint'></div>

我有一些Bootstrap代码，当用户查看进度条时，它可以很好地制作动画。

但是，它将对页面中的所有进度条进行动画处理，而不是仅对该查看部分中的进度条进行动画处理。结果，当用户转到进度条的另一部分时，这些进度条已经被动画化，并且他看不到任何动画。

然后，我的问题是：如何修改下面的代码以在查看不同部分时独立为其设置动画？

的CSS

#skills {
  padding: 60px 0;
}

#skills .progress {
  height: 35px;
  margin-bottom: 10px;
}

#skills .progress .skill {
  font-family: "Open Sans", sans-serif;
  line-height: 35px;
  padding: 0;
  margin: 0 0 0 20px;
  text-transform: uppercase;
}

#skills .progress .skill .val {
  float: right;
  font-style: normal;
  margin: 0 20px 0 0;
}

#skills .progress-bar {
  width: 1px;
  text-align: left;
  transition: .9s;
}

JS

// Skills section
$('#skills').waypoint(function() {
  $('.progress .progress-bar').each(function() {
    $(this).css("width", $(this).attr("aria-valuenow") …