使用JQuery / Javascript进行滚动控制

时间:2014-08-08 14:20:05

标签: javascript jquery scroll

我正在寻找模仿新Flickr网站在https://www.flickr.com/#section-1处的滚动行为。

无论您移动鼠标滚轮的速度有多快或多快,结果都是一样的。

我知道这是一种视差网站,但我对滚动控件更感兴趣。

这就是我现在正在使用此插件https://github.com/ultrapasty/jquery-disablescroll

var mypos = $(window).scrollTop();
var up = false;
var newscroll;
$(window).scroll(function () {
    newscroll = $(window).scrollTop();
    if (newscroll > mypos && !up) {
        $(window).disablescroll(); //disable scroll
        //$('body').addClass('stop-scrolling'); //a css that inputs an overflow hidden
        $('#video_bkg').stop().animate({
            height: 'toggle',
            opacity: 'toggle'
        }, 500);
        up = !up;
    } else if(newscroll < mypos && up) {
        $('#video_bkg').stop().animate({
            height: 'toggle',
            opacity: 'toggle'
        }, 500, function() {
            $(window).disablescroll('undo'); //reenable scroll
        });
        up = !up;
    }
    mypos = newscroll;
});

但这些都不等于Flickr的效果。

1 个答案:

答案 0 :(得分:1)

example使用fullPage jQuery plugin执行此操作。

使用

$(document).ready(function() {
    $('#fullpage').fullpage();
});

初始化脚本。