在滚动条上设置相对位置背景y元素

Question

jQuery(function ($) {       

    $(window).scroll(function() { 
        var y = $(this).scrollTop();

        if (y > 360) {
            var pos_yvalue = y - 294;
            $('.site-header .wrap').css('background-position-y',
            pos_yvalue.toString() + 'px');
        }
    });
});

通过上面的内容，我想将环绕头（ .site-header .wrap ）中的图像设置为相对于滚动的y位置的背景位置y。

因此，当我在360px以上滚动时，我想将site-header .wrap的背景图像定位为66，当它为362时，包装的背景图像应为65等。

上面的代码将代表值66、67、68等，而不是像这样向下计数：66、65、64、63、62、61等。

由于某种原因，我无法理解这一点。

Answer 1

如果您不添加代码或拥有可让您知道的IDE，我会注意到一些语法错误，这可能是您问题的一部分。

照原样，您的代码应如下所示：

jQuery(function ($) {       

    $(window).scroll(function() { 
        var y = $(this).scrollTop();

        if (y > 360) {
            var pos_yvalue = y - 294;
            $('.site-header .wrap').css('background-position-y',
        pos_yvalue.toString() + 'px');
        }
    });
});

您缺少一些结束的）。 否则，该代码似乎将背景位置添加到.site-header元素。 您要固定在页面顶部的固定标题吗？

Answer 2

实际上这只是一个计算问题：

if (y > 360) {
    var minus_y = ( y - 295 ) - 66;   
    var pos_yvalue = 66 - minus_y;
    $('.site-header .wrap').css('background-position-y', pos_yvalue.toString() + 'px');
}