滚动到 div 时滚动效果答案

【问题标题】：Roll out effect on a div when scroll to it滚动到 div 时滚动效果
【发布时间】：2015-10-11 17:09:57
【问题描述】：

我想要实现的是当您在页面上向下滚动到具有 .skill-container 的 div 时，它会展开。就像这个 JFiddle，但在滚动而不是悬停。

http://jsfiddle.net/fernandosavio/u8MS3/

我尝试了一些方法，包括使用 stop().animate 的方法，但没有成功。我认为这是在正确的轨道上..

CSS

.slideOut {
   width: 600px;
}

.skill-container {
    width: 0;
    overflow: hidden;
    height: 250px;
    background-color: rgba(27,176,206,.6);
    float: left;
    -webkit-transition: all .5s ease .05s;
    -moz-transition: all .5s ease .05s;
    -o-transition: all .5s ease .05s;
    -ms-transition: all .5s ease .05s;
    transition: all .5s ease .05s;
}

$('.skill-container').each(function(){
var imagePos = $(this).offset().top;

var topOfWindow = $(window).scrollTop();
    if (imagePos < topOfWindow+200) {
        $(this).addClass("slideOut");
    }
});

【问题讨论】：

请注意，调用.offset() 将触发forced synchronous layout。如果您在每个滚动事件上都这样做，您将在较慢的浏览器/设备上快速降低性能。确保限制运行此代码以响应滚动事件的次数（使用 underscoreJS/lodash 的 _.throttle() 方法），并且首先读取值，然后再进行任何修改。

标签： javascript jquery css scroll css-transitions

【解决方案1】：

Checkout Waypoints http://imakewebthings.com/waypoints/ 作为一个很好的插件可以做到这一点。

如果您使用自己的代码执行此操作，则需要使用滚动事件

 $(window).scroll(function(e){
    var topOfWindow = $(window).scrollTop();
 });

然后别忘了在不需要的时候解绑滚动事件

//Unbinds Scroll Event
function unbindScroll(){
    $(window).unbind("scroll");
}

还可以考虑使用 Timeout 限制 Scroll 事件代码运行的次数

function setScrollTimer(){
    unbindScroll();
    scrollTimer = window.setTimeout(function(){bindScroll()}, 10);
}

jQuery Waypoints 为您完成所有这些工作

【讨论】：