jquery实现页面滑动到指定位置显示背景

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script>

    $(document).ready(function () {

        $(document).scroll(function () {

            var res = $(this).scrollTop();

            console.log(res)

            if (res >= 333 && window.screen.width > 500) {

                document.getElementsByClassName('roll')[0].style.cssText = "background-image: url(https://cdn.shopify.cn/s/files/1/0263/9436/1927/files/MU6.jpg?v=1574770098);background-repeat:no-repeat;background-attachment:fixed;background-size:100% auto;";

            } else {

                document.getElementsByClassName('roll')[0].style.background = "none";

            }

        })

    })

</script>