Search code examples
htmlcsspositionalignmentparallax

How to center align/center parallax scrolling content?

I am using a simple parallax scrolling effect however I am running into two problems.

  1. I cannot have the #background stay centered while zooming in and out. If i change the position to relative it will, but it needs to remain fixed to create the parallax effect.

  2. the #nav container is sitting above the background and if i completely remove the #nav container the background will drop to the bottom of the page. I would like the #nav bar to sit on top of the background ultimately creating the same idea in this website: http://www.falve.co.nz/collection/

Below is my code

<div id="page-wrap">
<div id="background"><img src="../images/COVER PHOTO.JPG" width="97%" height="97%"></div>
<nav id="nav">Nav</nav>
<div id="main">"MAIN BODY</div>

CSS

#page-wrap{
position: relative;
min-width: 1366px;
max-width: 2048px;
margin: 0px auto; 
width: 100%;
}


#nav {
margin: 0;
height: 0px;
background: #fff;
position: relative;
}

#main {
margin: 1000px 0 0 0;
height: 1200px;
background: #fff;
position: relative;
}

#background {
position: fixed;
margin: auto;
left: 50px;
width: 98%;
height: 97%;
}

JS

<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.stellar.min.js"></script>

<script>$(function() {
$(window).on('scroll', function() {
    $('#background').css('margin-top', $(window).scrollTop() * -.3);
});
});
</script>
Solution

  • Option #1 (related to your code):

    There are some basics missing. For example closing div of page-wrap.

    1. Basically you can set a background for your header and play with it.

    2. With little conditions you can do the same trick with the nav

      if ($(this).scrollTop() > 200) {
    $("#nav").fadeOut();
} else {
    $("#nav").stop().fadeIn();
}

    See your Example

    Option #2 (Recommended):

    I would recommend using a special plugin (skrollr) for parallax related stuff. You can do a lot more with lot more options with individual support. There is a tutorial section as well.

    I hope I helped you with my first answer here.