js эффект параллакса не работает в двух фоновых разделах на странице - PullRequest
Новая
       28

js эффект параллакса не работает в двух фоновых разделах на странице

0 голосов
/ 01 мая 2018

У меня есть функция параллакса, примененная в двух разделах фона на главной странице. (1 и 4 раздела) Параллекс работает правильно в первом разделе, но в разделе 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. Я заметил, что элемент background-position для section4 имеет некоторые значения пикселей.

enter image description here

Если я затем установлю пиксели в 0px, изображение показывает:

enter image description here

Я предполагаю, что это происходит из-за того, как работает функция JS. Я новичок в JS и в мире Интернета, поэтому извиняюсь за недоразумение! Нужно ли создавать отдельную функцию JS для другого раздела?

...