Question

我认为我的任务是模仿这个演示的滚动部分。 http://sandbox.linkrightmedia.com/acme-home/

我目前的版本位于http://demo.acmeroofsystems.com/。

我似乎无法通过许多不同的行动方法来解决这个问题。

目标是在垂直滚动的同时最小化移动每个部分的背景图像。我希望只在该部分位于窗口的任何位置时触发此操作，以便最小化事件触发。

到目前为止，我只提出了一些代码，但它不起作用。

function isScrolledIntoView(elem) {

    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

var $services = $('#front-services'),
    windowWidth = window.outerWidth;

if ( windowWidth >= 768) {
    $(window).scroll(function () {
        var currentScrollPosition = window.scrollY;
        if (isScrolledIntoView($services)) {
            console.log(currentScrollPosition)
        }
    });
}

目标是仅在平板电脑或更高版本（768px之后）触发此功能。我现在只是在进行测试，但最终还是希望用console.log调整替换background-position-y语句，将每个1px垂直滚动的水平调整为1/10像素。

但我甚至无法正确触发它甚至可以使用一些数字来编辑背景位置。如何实现这一目标？

在垂直滚动的水平的背景图象位置

0 个答案: