Question

我尝试使用jInvertScroll，以便我的标题背景图像在向下滚动的同时向左滚动，然后当整个站点到达图像的右边界时，整个站点将继续作为普通网页显示。不幸的是，现在图片以某种方式向右滚动，我不知道为什么。

我尝试在html和主要是CSS周围切换（例如top：0而不是bottom：0等）。在我刚开始学习js时，我无法修复或修改其中的javascript部分。

带有嵌入式javascript的HTML：

     <body>
        <header>
            <div class="background scroll">
                <img src="media/header.png" alt="background image" class="background_img"/>
            </div>
        </header> 

    <script type="text/javascript" src="resources/javascript/jquery-3.4.1.js"></script>   
    <script type="text/javascript" src="resources/javascript/jquery.jInvertScroll.js"></script> 
    <script type="text/javascript">
        (function($) {
        var elem = $.jInvertScroll(['.scroll'],        // an array containing the selector(s) for the elements you want to animate
            {
            height: 3000,  
            onScroll: function(percent) {   
                console.log(percent);
            }
        });
        $(window).resize(function() {
          if ($(window).width() <= 768) {
            elem.destroy();
          }
          else {
            elem.reinitialize();
          }
        });
    }(jQuery));
        </script>    
    </body>

对应的CSS：

.background {
    z-index: 1;
}
.background_img {
    height: 100vh;
    width: auto;
    position: absolute;
}
body
{
    overflow-x: hidden;
}
.scroll {
    width: auto;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
}

Answer 1

Nvm知道了，这是CSS代码部分position:absolute 把我搞砸了

jInvertScroll用于水平滚动的方向错误

1 个答案: