Javascript 滚动条上的视差图像和粘性标题无法正常工作_Javascript_Html_Css

Javascript 滚动条上的视差图像和粘性标题无法正常工作

javascript html css

Javascript 滚动条上的视差图像和粘性标题无法正常工作,javascript,html,css,Javascript,Html,Css,我用Html Css和Js制作了一个简单的视差图像和粘性标题，除了main div包含h1标签（正如你在下面的代码中看到的）之外，其他一切都很好，它在导航菜单下进行了折叠这是我的密码：您应该使用随机图像以获得更好的结果来测试代码 HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"></meta> <title>

我用Html Css和Js制作了一个简单的视差图像和粘性标题，除了main div包含h1标签（正如你在下面的代码中看到的）之外，其他一切都很好，它在导航菜单下进行了折叠

这是我的密码：您应该使用随机图像以获得更好的结果来测试代码

HTML:

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"></meta>
        <title>Daygostar Homepage</title>
        <link rel="stylesheet" type="text/css" href="css/styles.css"/>
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <img src="images/bg.png" id="bg" alt="Background Image"/>
            </div>
            <div id="content">
                <div id="navbar">
                    <div id="logo">
                        Daygostar
                    </div>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Blogs</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
            <div id="main">
                <h1>Daygostar Web Design</h1>
            </div>
        </div>
        <script type="text/javascript" src="js/script.js"></script>
    </body>
</html>

    *{padding:0;margin:0;font-family:arial;}
#header{
    height:91vh;
}
#header > img{
    width:100%;
    height:91vh;
    position:fixed;
    z-index:1;
}
#content{
    height:100vh;
    z-index:10;
    background-color:#fff;
    position:relative;
}
#content > #navbar{
    position:absolute;
    top:0;
    width:100%;
    height:80px;
    background-color:#000;
}
#main{
    height:100vh;
    border:solid blue;
    background-color:#fff;
    position:relative;
    padding-top:200px;
    text-align:center;
    font-size:25px;
    z-index:10;
}
#main > *{
    margin-top:30px;
}
#logo{
    color:#fff;
    font-size:35px;
    float:left;
    margin-top:15px;
    margin-left:20px;
    cursor:pointer;
}
#navbar > ul{
    float:right;
    width:700px;
    list-style:none;
    margin-top:25px;
}
#navbar > ul > li{
    display:inline;
}
#navbar ul > li > a{
    color:#fff;
    font-size:20px;
    text-decoration:none;
    padding:10px 30px;
}
#navbar ul > li > a:hover{
    text-decoration:underline;
}

    var header = document.getElementById("header");
var navBar = document.getElementById("navbar");
var bg = document.getElementById("bg");
var navbarHeight = navBar.offsetHeight;
var headerHeight = header.offsetHeight;

header.style.height = screen.height-navbarHeight;

function initParallex(){
    if (window.pageYOffset > headerHeight){
        navBar.style.position = "fixed";
        navBar.style.top = "0";
    }else{
        navBar.style.position = "absolute";
        navBar.style.top = "0";
    }
    bg.style.top = -(window.pageYOffset/5)+"px";
}

window.addEventListener("scroll", initParallex);

<div id="wrapper">
  <div id="header">
    <img src="http://orig13.deviantart.net/a8a7/f/2009/302/6/4/m_o_d_tile_background_by_viper_mod.png" id="bg" alt="Background Image" />
  </div>
  <div id="content">
    <div id="navbar">
      <div id="logo">
        Daygostar
      </div>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Blogs</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
  <div id="main">
    <h1>Daygostar Web Design</h1>
  </div>
</div>

* {
    padding: 0;
    margin: 0;
    font-family: arial;
}
#header {
    height: 91vh;
}
#header > img {
    width: 100%;
    height: 91vh;
    position: fixed;
    z-index: 1;
}
#content {
    height: 100vh;
    z-index: 10;
    background-color: #fff;
    position: relative;
}
#content > #navbar {
    width: 100%;
    min-height: 80px;
    background-color: #000;
}
#main {
    height: 100vh;
    border: solid blue;
    background-color: #fff;
    position: relative;
    padding-top: 200px;
    text-align: center;
    font-size: 25px;
    z-index: 1;
}
#main > * {
    margin-top: 30px;
}
#logo {
    color: #fff;
    font-size: 35px;
    float: left;
    margin-top: 15px;
    margin-left: 20px;
    cursor: pointer;
}
/*#navbar {
    position: absolute;
    top: 0;
}*/

#navbar.sticky {
    position: fixed;
    top:0;
    z-index: 100;
}

#navbar > ul {
    /* float: right; */
    width: 700px;
    list-style: none;
    margin-top: 25px;
    white-space: nowrap;
}
#navbar > ul > li {
    display: inline;
    float: none;
}
#navbar ul > li > a {
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    padding: 10px 30px;
}
#navbar ul > li > a:hover {
    text-decoration: underline;
}

document.addEventListener("DOMContentLoaded",function(){
  window.scrollTo(0,0);
  header.style.height = screen.height-navbar.offsetHeight;
  navbar.position_from_top = getAbsoluteOffsetFromBody(navbar).top;
  window.addEventListener("scroll", initParallex);
},false);

function initParallex(){
  bg.style.top = -(window.pageYOffset/5)+"px";
  if(window.scrollY >= navbar.position_from_top)
    $(navbar).addClass('sticky');
  else
    $(navbar).removeClass('sticky');
}

//see here: http://stackoverflow.com/a/34014786/1654250
getAbsoluteOffsetFromBody = function(el)
{   // finds the offset of el from the body or html element
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) )
    {
        _x += el.offsetLeft - el.scrollLeft + el.clientLeft;
        _y += el.offsetTop - el.scrollTop + el.clientTop;
        el = el.offsetParent;
    }
    return { top: parseInt(_y), left: parseInt(_x) };
}

Javascript:

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"></meta>
        <title>Daygostar Homepage</title>
        <link rel="stylesheet" type="text/css" href="css/styles.css"/>
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <img src="images/bg.png" id="bg" alt="Background Image"/>
            </div>
            <div id="content">
                <div id="navbar">
                    <div id="logo">
                        Daygostar
                    </div>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Blogs</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
            <div id="main">
                <h1>Daygostar Web Design</h1>
            </div>
        </div>
        <script type="text/javascript" src="js/script.js"></script>
    </body>
</html>

    *{padding:0;margin:0;font-family:arial;}
#header{
    height:91vh;
}
#header > img{
    width:100%;
    height:91vh;
    position:fixed;
    z-index:1;
}
#content{
    height:100vh;
    z-index:10;
    background-color:#fff;
    position:relative;
}
#content > #navbar{
    position:absolute;
    top:0;
    width:100%;
    height:80px;
    background-color:#000;
}
#main{
    height:100vh;
    border:solid blue;
    background-color:#fff;
    position:relative;
    padding-top:200px;
    text-align:center;
    font-size:25px;
    z-index:10;
}
#main > *{
    margin-top:30px;
}
#logo{
    color:#fff;
    font-size:35px;
    float:left;
    margin-top:15px;
    margin-left:20px;
    cursor:pointer;
}
#navbar > ul{
    float:right;
    width:700px;
    list-style:none;
    margin-top:25px;
}
#navbar > ul > li{
    display:inline;
}
#navbar ul > li > a{
    color:#fff;
    font-size:20px;
    text-decoration:none;
    padding:10px 30px;
}
#navbar ul > li > a:hover{
    text-decoration:underline;
}

    var header = document.getElementById("header");
var navBar = document.getElementById("navbar");
var bg = document.getElementById("bg");
var navbarHeight = navBar.offsetHeight;
var headerHeight = header.offsetHeight;

header.style.height = screen.height-navbarHeight;

function initParallex(){
    if (window.pageYOffset > headerHeight){
        navBar.style.position = "fixed";
        navBar.style.top = "0";
    }else{
        navBar.style.position = "absolute";
        navBar.style.top = "0";
    }
    bg.style.top = -(window.pageYOffset/5)+"px";
}

window.addEventListener("scroll", initParallex);

<div id="wrapper">
  <div id="header">
    <img src="http://orig13.deviantart.net/a8a7/f/2009/302/6/4/m_o_d_tile_background_by_viper_mod.png" id="bg" alt="Background Image" />
  </div>
  <div id="content">
    <div id="navbar">
      <div id="logo">
        Daygostar
      </div>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Blogs</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
  <div id="main">
    <h1>Daygostar Web Design</h1>
  </div>
</div>

* {
    padding: 0;
    margin: 0;
    font-family: arial;
}
#header {
    height: 91vh;
}
#header > img {
    width: 100%;
    height: 91vh;
    position: fixed;
    z-index: 1;
}
#content {
    height: 100vh;
    z-index: 10;
    background-color: #fff;
    position: relative;
}
#content > #navbar {
    width: 100%;
    min-height: 80px;
    background-color: #000;
}
#main {
    height: 100vh;
    border: solid blue;
    background-color: #fff;
    position: relative;
    padding-top: 200px;
    text-align: center;
    font-size: 25px;
    z-index: 1;
}
#main > * {
    margin-top: 30px;
}
#logo {
    color: #fff;
    font-size: 35px;
    float: left;
    margin-top: 15px;
    margin-left: 20px;
    cursor: pointer;
}
/*#navbar {
    position: absolute;
    top: 0;
}*/

#navbar.sticky {
    position: fixed;
    top:0;
    z-index: 100;
}

#navbar > ul {
    /* float: right; */
    width: 700px;
    list-style: none;
    margin-top: 25px;
    white-space: nowrap;
}
#navbar > ul > li {
    display: inline;
    float: none;
}
#navbar ul > li > a {
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    padding: 10px 30px;
}
#navbar ul > li > a:hover {
    text-decoration: underline;
}

document.addEventListener("DOMContentLoaded",function(){
  window.scrollTo(0,0);
  header.style.height = screen.height-navbar.offsetHeight;
  navbar.position_from_top = getAbsoluteOffsetFromBody(navbar).top;
  window.addEventListener("scroll", initParallex);
},false);

function initParallex(){
  bg.style.top = -(window.pageYOffset/5)+"px";
  if(window.scrollY >= navbar.position_from_top)
    $(navbar).addClass('sticky');
  else
    $(navbar).removeClass('sticky');
}

//see here: http://stackoverflow.com/a/34014786/1654250
getAbsoluteOffsetFromBody = function(el)
{   // finds the offset of el from the body or html element
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) )
    {
        _x += el.offsetLeft - el.scrollLeft + el.clientLeft;
        _y += el.offsetTop - el.scrollTop + el.clientTop;
        el = el.offsetParent;
    }
    return { top: parseInt(_y), left: parseInt(_x) };
}

如您所见，我已经添加了一个if/else语句，以检查标题高度是否小于window.pageYOffset或不在script.js文件中，但一旦网页到达主div，折叠的导航就会隐藏

如果你知道如何解决这个问题，那就太棒了
您可以在这里查看：

免责声明：
我确实使用了在这个网站上找到的代码，并在中添加了jQuery
HTML:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"></meta> <title>Daygostar Homepage</title> <link rel="stylesheet" type="text/css" href="css/styles.css"/> </head> <body> <div id="wrapper"> <div id="header"> <img src="images/bg.png" id="bg" alt="Background Image"/> </div> <div id="content"> <div id="navbar"> <div id="logo"> Daygostar </div> <ul> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Blogs</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> <div id="main"> <h1>Daygostar Web Design</h1> </div> </div> <script type="text/javascript" src="js/script.js"></script> </body> </html>

*{padding:0;margin:0;font-family:arial;} #header{ height:91vh; } #header > img{ width:100%; height:91vh; position:fixed; z-index:1; } #content{ height:100vh; z-index:10; background-color:#fff; position:relative; } #content > #navbar{ position:absolute; top:0; width:100%; height:80px; background-color:#000; } #main{ height:100vh; border:solid blue; background-color:#fff; position:relative; padding-top:200px; text-align:center; font-size:25px; z-index:10; } #main > *{ margin-top:30px; } #logo{ color:#fff; font-size:35px; float:left; margin-top:15px; margin-left:20px; cursor:pointer; } #navbar > ul{ float:right; width:700px; list-style:none; margin-top:25px; } #navbar > ul > li{ display:inline; } #navbar ul > li > a{ color:#fff; font-size:20px; text-decoration:none; padding:10px 30px; } #navbar ul > li > a:hover{ text-decoration:underline; }

var header = document.getElementById("header"); var navBar = document.getElementById("navbar"); var bg = document.getElementById("bg"); var navbarHeight = navBar.offsetHeight; var headerHeight = header.offsetHeight; header.style.height = screen.height-navbarHeight; function initParallex(){ if (window.pageYOffset > headerHeight){ navBar.style.position = "fixed"; navBar.style.top = "0"; }else{ navBar.style.position = "absolute"; navBar.style.top = "0"; } bg.style.top = -(window.pageYOffset/5)+"px"; } window.addEventListener("scroll", initParallex);

<div id="wrapper"> <div id="header"> <img src="http://orig13.deviantart.net/a8a7/f/2009/302/6/4/m_o_d_tile_background_by_viper_mod.png" id="bg" alt="Background Image" /> </div> <div id="content"> <div id="navbar"> <div id="logo"> Daygostar </div> <ul> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Blogs</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> <div id="main"> <h1>Daygostar Web Design</h1> </div> </div>

* { padding: 0; margin: 0; font-family: arial; } #header { height: 91vh; } #header > img { width: 100%; height: 91vh; position: fixed; z-index: 1; } #content { height: 100vh; z-index: 10; background-color: #fff; position: relative; } #content > #navbar { width: 100%; min-height: 80px; background-color: #000; } #main { height: 100vh; border: solid blue; background-color: #fff; position: relative; padding-top: 200px; text-align: center; font-size: 25px; z-index: 1; } #main > * { margin-top: 30px; } #logo { color: #fff; font-size: 35px; float: left; margin-top: 15px; margin-left: 20px; cursor: pointer; } /*#navbar { position: absolute; top: 0; }*/ #navbar.sticky { position: fixed; top:0; z-index: 100; } #navbar > ul { /* float: right; */ width: 700px; list-style: none; margin-top: 25px; white-space: nowrap; } #navbar > ul > li { display: inline; float: none; } #navbar ul > li > a { color: #fff; font-size: 20px; text-decoration: none; padding: 10px 30px; } #navbar ul > li > a:hover { text-decoration: underline; }

document.addEventListener("DOMContentLoaded",function(){ window.scrollTo(0,0); header.style.height = screen.height-navbar.offsetHeight; navbar.position_from_top = getAbsoluteOffsetFromBody(navbar).top; window.addEventListener("scroll", initParallex); },false); function initParallex(){ bg.style.top = -(window.pageYOffset/5)+"px"; if(window.scrollY >= navbar.position_from_top) $(navbar).addClass('sticky'); else $(navbar).removeClass('sticky'); } //see here: http://stackoverflow.com/a/34014786/1654250 getAbsoluteOffsetFromBody = function(el) { // finds the offset of el from the body or html element var _x = 0; var _y = 0; while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) { _x += el.offsetLeft - el.scrollLeft + el.clientLeft; _y += el.offsetTop - el.scrollTop + el.clientTop; el = el.offsetParent; } return { top: parseInt(_y), left: parseInt(_x) }; }
JavaScript:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"></meta> <title>Daygostar Homepage</title> <link rel="stylesheet" type="text/css" href="css/styles.css"/> </head> <body> <div id="wrapper"> <div id="header"> <img src="images/bg.png" id="bg" alt="Background Image"/> </div> <div id="content"> <div id="navbar"> <div id="logo"> Daygostar </div> <ul> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Blogs</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> <div id="main"> <h1>Daygostar Web Design</h1> </div> </div> <script type="text/javascript" src="js/script.js"></script> </body> </html>

*{padding:0;margin:0;font-family:arial;} #header{ height:91vh; } #header > img{ width:100%; height:91vh; position:fixed; z-index:1; } #content{ height:100vh; z-index:10; background-color:#fff; position:relative; } #content > #navbar{ position:absolute; top:0; width:100%; height:80px; background-color:#000; } #main{ height:100vh; border:solid blue; background-color:#fff; position:relative; padding-top:200px; text-align:center; font-size:25px; z-index:10; } #main > *{ margin-top:30px; } #logo{ color:#fff; font-size:35px; float:left; margin-top:15px; margin-left:20px; cursor:pointer; } #navbar > ul{ float:right; width:700px; list-style:none; margin-top:25px; } #navbar > ul > li{ display:inline; } #navbar ul > li > a{ color:#fff; font-size:20px; text-decoration:none; padding:10px 30px; } #navbar ul > li > a:hover{ text-decoration:underline; }

var header = document.getElementById("header"); var navBar = document.getElementById("navbar"); var bg = document.getElementById("bg"); var navbarHeight = navBar.offsetHeight; var headerHeight = header.offsetHeight; header.style.height = screen.height-navbarHeight; function initParallex(){ if (window.pageYOffset > headerHeight){ navBar.style.position = "fixed"; navBar.style.top = "0"; }else{ navBar.style.position = "absolute"; navBar.style.top = "0"; } bg.style.top = -(window.pageYOffset/5)+"px"; } window.addEventListener("scroll", initParallex);

<div id="wrapper"> <div id="header"> <img src="http://orig13.deviantart.net/a8a7/f/2009/302/6/4/m_o_d_tile_background_by_viper_mod.png" id="bg" alt="Background Image" /> </div> <div id="content"> <div id="navbar"> <div id="logo"> Daygostar </div> <ul> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Blogs</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> <div id="main"> <h1>Daygostar Web Design</h1> </div> </div>

* { padding: 0; margin: 0; font-family: arial; } #header { height: 91vh; } #header > img { width: 100%; height: 91vh; position: fixed; z-index: 1; } #content { height: 100vh; z-index: 10; background-color: #fff; position: relative; } #content > #navbar { width: 100%; min-height: 80px; background-color: #000; } #main { height: 100vh; border: solid blue; background-color: #fff; position: relative; padding-top: 200px; text-align: center; font-size: 25px; z-index: 1; } #main > * { margin-top: 30px; } #logo { color: #fff; font-size: 35px; float: left; margin-top: 15px; margin-left: 20px; cursor: pointer; } /*#navbar { position: absolute; top: 0; }*/ #navbar.sticky { position: fixed; top:0; z-index: 100; } #navbar > ul { /* float: right; */ width: 700px; list-style: none; margin-top: 25px; white-space: nowrap; } #navbar > ul > li { display: inline; float: none; } #navbar ul > li > a { color: #fff; font-size: 20px; text-decoration: none; padding: 10px 30px; } #navbar ul > li > a:hover { text-decoration: underline; }

document.addEventListener("DOMContentLoaded",function(){ window.scrollTo(0,0); header.style.height = screen.height-navbar.offsetHeight; navbar.position_from_top = getAbsoluteOffsetFromBody(navbar).top; window.addEventListener("scroll", initParallex); },false); function initParallex(){ bg.style.top = -(window.pageYOffset/5)+"px"; if(window.scrollY >= navbar.position_from_top) $(navbar).addClass('sticky'); else $(navbar).removeClass('sticky'); } //see here: http://stackoverflow.com/a/34014786/1654250 getAbsoluteOffsetFromBody = function(el) { // finds the offset of el from the body or html element var _x = 0; var _y = 0; while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) { _x += el.offsetLeft - el.scrollLeft + el.clientLeft; _y += el.offsetTop - el.scrollTop + el.clientTop; el = el.offsetParent; } return { top: parseInt(_y), left: parseInt(_x) }; }