Question

好的所以我有这个代码可以用于身体的背景图像，但我想扩展它的功能，以便在同一页面上同时更改许多div的背景位置。我试图摆弄选择器，但没有太多运气

    <script type="text/javascript">
    jQuery( document ).ready( function( $ ) {
        $('body').css('background-attachment', 'fixed');
        $(window).scroll(function () {
            document.body.style.backgroundPosition = "50% " + ( 1800 + (Math.max(document.documentElement.scrollTop, document.body.scrollTop) / 2 )) + "px";
        });
    });
    </script>

    CODE I'M TRYING TO GET TO WORK
    <script type="text/javascript">
        jQuery( document ).ready( function( $ ) {
            $('body').css('background-attachment', 'fixed');
            $(window).scroll(function () {
            $( ".parrallax" ).style.backgroundPosition = "50% " + ( 1800 + (Math.max(document.documentElement.scrollTop, document.body.scrollTop) / 2 )) + "px";
        });
    });
    </script>

    <div class="parrallax" style="background-image: url('http://www.g1dental.com/wp-content/uploads/2015/08/dental.png');">

Answer 1

以下是更改后台位置的示例。当您开始滚动时，您将看到正在更新的值。当您决定在页面上想要什么div时，您可以轻松地使用相同的逻辑来更新其背景位置。

http://jsfiddle.net/e6wd9fjt/

jQuery( document ).ready( function(readyevent) {
            $('body').css('background-attachment', 'fixed');
            $(window).scroll(function (scrollevent) {

                    $(".parrallax").css('background-position', '0px '+ (Math.max(document.documentElement.scrollTop, document.body.scrollTop) / 2 ) + "px");
                $('#background_position').text($(".parrallax").css('background-position'));
        });

});

Parrallax滚动背景代码以定位多个div

1 个答案: