尝试将视差滚动添加到已经设计好的网站。由于某种原因它不工作。有人可以帮忙吗？

Question

我正在尝试将视差滚动添加到已经设计好的网站中。由于某种原因它不工作。有人可以帮忙吗？我使用的教程就是这个。

https://www.youtube.com/watch?v=D75WTf_Y738&list=PLG77V5Yi8Ih_yRxLPALtog4AtVyHEuRwf&index=10

这是我写的脚本：

 <script>
        function parallax(){
            var intro_section = document.getElementById ('intro_section');
            intro_section.style.top = -(window.pageYOffest / 10)+'px';
        }
    window.addEventListener("scroll", parallax, false);
    </script>

这是我要添加效果的 HTML 部分。

 <div id="intro_section" class="clearfix">
        <div id="Intro_section_container" class="clearfix">
            <p id="We_Know_Why_You’re_Here" class="animated fadeIn" data-wow-delay=".2s">
            We Know Why Your Here
            </p>
            <p id="text" class="animated fadeInUp" data-wow-duration=".2s" data-wow-delay=".2s">
            <span id="textspan2">The computer network at the heart of your small business is glitchy, loses data, refuses to sync with your mobile devices, or runs slower than a turtle with a limp. Sound about right?</span><br />
            </p>
            <p id="text1" class="animated fadeInUp" data-wow-duration=".5s" data-wow-delay=".3s">
            HOW DID WE KNOW?
            </p>
            <p id="text2" class="animated fadeInUp" data-wow-duration=".5s" data-wow-delay=".4s">
            <span id="textspan3">CloudPoint Technology's Managed IT Services clients USED to have those same problems too. </span><br />
            </p>
            <div id="find_out_button" class="clearfix wow fadeIn">
                <p id="Find_out_more_about_us">
                Learn More About Us
                </p>
            </div>
        </div>
    </div>

这是与本节相关的CSS。

 #intro_section {
   float: none;
height: auto;
margin-left: auto;
margin-top: 0px;
clear: none;
width: 100%;
background: url("img/abstrack_bg.jpg");
background-position: 5% 0%;
background-repeat: no-repeat 0px 50px;
background-attachment: fixed;
-webkit-background-size: cover;
background-size: cover;
display: block;
margin-bottom: 0px;
padding-bottom: 8%;
margin-right: auto;
padding-top: 8%;
padding-right: 0px;
padding-left: 0px;
}

#Intro_section_container {
float: none;
height: auto;
margin-left: auto;
margin-top: 0px;
clear: none;
width: 85%;
margin-bottom: 0px;
min-height: 0px;
margin-right: auto;
}

#We_Know_Why_You’re_Here {
float: none;
font-size: 746.7%;
width: 100%;
height: auto;
text-align: center;
font-weight: bold;
line-height: 100%;
color: rgb(160, 176, 187);
font-style: normal;
letter-spacing: normal;
text-decoration: none;
font-family: 'Dagny Pro';
position: relative;
top: 0px;
left: 0px;
z-index: 101;
margin-top: 0px;
margin-left: auto;
clear: none;
min-height: 0px;
text-shadow: rgba(100, 124, 140, 0.709804) 0px 3px 3px;
margin-right: auto;
margin-bottom: 0px;

}

如果需要，我可以提供开发网站的实时提要。

我很感激能得到的任何帮助。提前致谢。

Answer 1

处有错别字

    intro_section.style.top = -(window.pageYOffest / 10)+'px';

应该是

    intro_section.style.top = -(window.pageYOffset / 10)+'px';

你还应该添加

position:fixed;

到 css 共 intro_section

这里我在http://jsfiddle.net/qbfdwom5/

做了个demo

尝试将视差滚动添加到已经设计好的网站。由于某种原因它不工作。有人可以帮忙吗？

Trying to add Parallax scrolling to a website that is already designed. It isn't working for some reason. Can someone assist?

css

html

parallax