Question

我在主页的两个背景部分应用了视差功能。（1和4节） parallex在第一部分工作正确，但在第4部分，图像消失。

$(window).scroll(function() {
	parallax();
})
function parallax() {
	var wScroll = $(window).scrollTop();
	$('.parallax').css('background-position','center '+(wScroll*0.75)+'px')
}

              <!doctype html>
              <html lang="en">
                <head>
                  <title>Hello, world!</title>
                  <!-- Required meta tags -->
                  <meta charset="utf-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

                  <!-- Bootstrap CSS -->
                  <link rel="stylesheet" href="css/bootstrap.min.css">
               

                   <style>
                
                     section.masthead2{
                        background-image:url("https://wallpaperbrowse.com/media/images/b807c2282ab0a491bd5c5c1051c6d312_rP0kQjJ.jpg");
                        background-repeat: no-repeat;
                        background-position: center ;
                        -webkit-background-size: cover;
                        -moz-background-size: cover;
                        -o-background-size: cover;
                        background-size: cover;
                        height:80vh;
                        
                      }
                      section.masthead3{
                        background-color:orange;
                        background-repeat: no-repeat;
                        background-attachment: scroll;
                        background-position: center center;
                        -webkit-background-size: cover;
                        -moz-background-size: cover;
                        -o-background-size: cover;
                        background-size: cover;
                        height:80vh;
                        position:relative;
                      }
                      section.masthead4{
                        background-image:url("https://wallpaperbrowse.com/media/images/b807c2282ab0a491bd5c5c1051c6d312_rP0kQjJ.jpg");
                        background-repeat: no-repeat;
                        background-attachment: scroll;
                        background-position: center center;
                        -webkit-background-size: cover;
                        -moz-background-size: cover;
                        -o-background-size: cover;
                        background-size: cover;
                        height:80vh;
                        position:relative;
                      }
                      section.masthead5{
                        background-color:green;
                        background-repeat: no-repeat;
                        background-attachment: scroll;
                        background-position: center center;
                        -webkit-background-size: cover;
                        -moz-background-size: cover;
                        -o-background-size: cover;
                        background-size: cover;
                        height:80vh;
                        position:relative;
                      }
                      
                   </style>
                      
                </head>
                <body>
                <section class="container-fluid masthead2 parallax d-flex  align-items-center justify-content-center">
                </section>

                <section class="container-fluid masthead3 d-flex  align-items-center justify-content-center">  
                </section>

                <section class="container-fluid masthead4 parallax d-flex  align-items-center justify-content-center">  
                </section>

                <section class="container-fluid masthead5 d-flex  align-items-center justify-content-center">  
                </section>
                

                    
                
                  <!-- Optional JavaScript -->
                  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
                  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
                  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
                  <script src="js/bootstrap.min.js"></script>
                  <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> -->
                  <script src="js/parallax.js"></script>
                </body>
              </html>

在Inspect Element中测试我注意到section4的background-position元素有一些像素值。

如果我然后将像素设置为0px，则图像显示：

我认为JS函数的运行方式正在发生。我是JS和网络世界的新手，所以对任何误解都表示歉意！我是否需要为其他部分创建单独的JS函数？

js视差效果无法在页面

0 个答案: