While Scrolling, The Current Div Goes Up, And Another Div Under It (under The First Div Background) Shows

I have unordered list contains two list items. Every list item has content that fill a page height. So this means that the whole web page contains two scrollable pages. I want whe

Solution 1:

with html and css, a combination of z-indexing, transparent divs, and fixed position div.

run the code snippet below in full view, a bit rushed but you should get the idea.

html,
body {
  height: 100%;
  background: BLUE;
  position: relative;
  margin: 0;
  padding: 0;
}
.section {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 200;
}
.section-one {
  background: RED;
}

.section-two{
  padding-top:200px;  
}
.section-twoh1 {
  margin: 0;
  text-align: center;
}
.section-three {
  background: GRAY;
}
.fixed-section {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 100%;
  height: 200px;
  z-index: 100;
  text-align: center;
}

<divclass="section-one section"></div><divclass="section-two section"><h1>THIS IS A TEXT</h1></div><divclass="section-three section"></div><divclass="fixed-section"><imgsrc="http://placehold.it/350x150"></div>

Solution 2:

That is my idea...

CSS:

#main_ul {
    padding: 0;
    margin: 0;
}
#main_ulli {
    min-height: 100px;
    list-style: none;
    position: relative;
}
#main_ulli.content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

HTML:

<ulid="main_ul"><liid="page1"><divclass="content"><section></section></div></li><liid="page2"><divclass="content"><section></section></div></li><liid="page3"><divclass="content"><section></section></div></li></ul>

jQuery:

var main_ul = $('#main_ul');
var li_elements = main_ul.find("li");
var window_height = $(window).height();

var i = 1000;
$.each(li_elements,function() {
    $(this).height(window_height);
    $(this).find(".content").height(window_height).css("z-index",i--).css("position","fixed");
});

$(window).scroll(function() {
    var scroll_offset = $(window).scrollTop();
    $.each(li_elements, function() {
        var el = $(this);
        if(el.offset().top < scroll_offset) {
            el.find(".content").css("position","absolute");
        } else {
            el.find(".content").css("position","fixed");
        }
    });
});

Solution 3:

What you are trying to achieve is called parallax effect!

There are a lot of jquery Plugins out there with those you can do such fancy stuff :)

Check this link out!