滚动控制与JQuery / Java Script

Scroll control with JQuery / Java Script

本文关键字:Java Script JQuery 控制 滚动      更新时间:2023-09-26

我正在寻找模仿相同的滚动行为的新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;
});

下面是一个使用fullPage jQuery插件的示例。

使用

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