Question

我有一个带有标题部分的页面。其中，有两个块在移动设备上滚动或拖动后向侧面移动。

我正在尝试设置页眉的滚动，但是我也希望页面的其余部分保持原状，直到侧边栏到达左侧：-50％和右侧：-50％。我将事件滚动设置为具有pageYoffset值的标题。

我试图设置页面提供给位置为fixed的部分的其余内容，但是随后滚动不再起作用，并且不计算pageYoffset。您是否有任何解决方法，以便页面的其余部分仅在标题完全显示后才能滚动？（简而言之，粉红色部分应位于顶部，并等待标题消失）

let current = $(window).scrollTop();
let windowHeight = $(window).height();
let eleLeft = $(".cd-half-left");
let eleRight = $(".cd-half-right");
let currPositionLeft = eleLeft.position().left;
let currPositionRight = eleRight.position().right;
let headerHeaight = $(".cd-section").height();
let halfBlockWidth = $(".cd-half-block").width();
let windowWidth = $(window).width();


$(window).scroll(function (event) {
    current = $(window).scrollTop();
    console.log({total:total,current:current});

    var newPosition =  ((current / headerHeaight)*100) / 2;

    console.log(newPosition);


    eleLeft.css({left:"-"+newPosition+'%'});
    eleRight.css({right:"-"+newPosition+'%'});
});

FIDDLE

Answer 1

一种解决方案是不使用窗口滚动，而是处理滚动手势（通过鼠标滚轮和触摸移动）来控制左右面板，并在面板未完全打开时阻止实际滚动。

因此，请尝试使用$(window].scroll(handler)和$('.cd-block').bind('mousewheel', handler)

来代替$('.cd-block').bind('mousewheel', handler)

处理程序为：

function updateCurrent(event) {
    if (current >= 50) {
        current = 50;
    } else {
        if (current <= 0) {
            current = 0;
        }
        // if below 50 we cancel the event to prevent the scroll
        event.originalEvent.preventDefault();
    }

    eleLeft.css({left:"-"+current+'%'});
    eleRight.css({right:"-"+current+'%'});
}

这是一个有问题的但可行的解决方案（键盘空间，上下都应该处理）：

fiddle

获取具有position：fixed的元素上的滚动值

1 个答案: