Parallax image and Sticky header on Scroll does not work properly

Question

I have made a simple Parallax image and Sticky header on Scroll with Html Css & Js and everything works fine except the main div which contains an h1 tag (as you can see in my code below) that does collapeses under the navigation menu!

Here's my code: You should use a random image to get a better result to test the code.

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>

CSS:

    *{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;
}

Javascript:

    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);

As you can see I have alreay added an if/else statements to check wheather the headerHeight is less than window.pageYOffset or not in script.js file but as soon as the web page reaches the main div ,the collapsing nav would hide!

It would be awesome if you know how to solve this problem...

score 0 · Answer 1 · edited Apr 25 '16 at 20:23

You can have a look here:

http://codepen.io/craigiswayne/pen/MyQVQB/

Disclaimer:

I did use code found on this site AND added jQuery in.

HTML:

<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>

CSS:

* {
    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;
}

JavaScript:

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) };
}

Parallax image and Sticky header on Scroll does not work properly

1 Answers1