Search code examples
htmlscrollparallax

Fix position of page and move only one div from bottom to top while scrolling

I am developing a parallax website, and in one page(div) I have a some images in another div like

<div>   //page which fits in window
  <div>   //inner div which will be on left side, and this needs to be fixed positionwhile scrolling
      Some content....
  </div>
  <div>  //inner div it will be on right side with 4 small images, this div should move from bottom to top while scrolling
     <img></img><img></img><img></img><img></img>
  </div>
</div>

enter image description here

So to tell shortly, I have a page with two divs, in which I want to move only one div and another should be fixed.

As seen in picture Vision div and background should be fixed and only four images in the right side should move from bottom to top while scrolling.

Once the second div scrolled to top, then I will move the page and show next page.

Any ideas???

Solution

  • Created a fiddle for you here: https://jsfiddle.net/svh8owgz/

    In answer to your questions: fixing an image regardless of scrolling can be done with the CSS with position: fixed.

    So in my example - I created the div with class companyInfo and styled it:

    .companyInfo {
    position:fixed;
    top:0%;
    left:2%;
    width: 200px;
    height:200px;
    background-color: blue;
}

    Which would be the part where it says 'Vision' in your image.

    Then as for the thumbnailcontainer - that's just got a relative positioning within the overall container:

    div.imageContainer {
    position:relative;
    left: 400px;
    width: 200px;
    top:400px;
}

    That's pretty straight forward: I will just move as expected ( at least - if the page container is larger than the screen height and scrolling is possible to begin with ).

    Then you mentioned 'Once the second div scrolled to top, then I will move the page and show next page'

    What you could do is use the jQuery.appear plugin to check whether elements come into visible range or not. What I did was add a div with id pageTrigger below the actual page container. That means you can start listening to events of users scrolling to the bottom of you page:

    (function ($) {
    $('#pageTrigger').appear();
    $('#pageTrigger').on('appear', function (event, $all_appeared_elements) {
        // Trigger page change
        alert("page change triggered");
    });
})(jQuery);

    Be sure you reference jQuery and jQuery.appear in your page otherwise this will not work. Also - I couldn't find a nice HTTPS CDN for this plugin so I had to include the source - sorry for that.