I am trying to create a specific scrolling effect on my webpage:
Upon loading the page, I want a div with background1.png to be displayed. As the user starts scrolling, I want this div to remain fixed for a predetermined amount of scroll movements. Once these movements are completed, the scrolling should continue and reveal a second div.
Here is a basic solution I have attempted, although I'm not sure if it's the right approach:
$(function() {
var staticSet = false;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if(currentScroll > '589' && staticSet == false){
staticSet = true;
$('.calder').css('position','static');
};
});
});
Essentially, I initially set the first div to position:fixed, and once the scrolling reaches a specific value, I change the div to static. However, this method does not provide a smooth transition between the two divs.