Question

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

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

我尝试过一些事情，包括使用stop（）。动画，但它没有工作。我认为这是在正确的轨道..

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;
}

JS

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

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

Answer 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虽然为你做了这一切

滚动到div时，在div上滚动效果

1 个答案: