Hello, I am currently utilizing a JavaScript library to create a website with full page scrolling. If you want to know about the library, check out this link:
For those interested, here is an example of my work on jsfiddle: http://jsfiddle.net/aLjLjxux/
My query pertains to the behavior of elements when scrolling; rather than being pushed upwards and out of view, I would like them to remain fixed and overlap with subsequent divs. Is there a straightforward way to achieve this using the current library, or should I look into another library for this functionality?
To provide visual context, envision a layout similar to , but with a reversed effect where later divs overshadow previous ones as you scroll.
<body>
<div class="main">
<section style="background-color: #eaeaea;" class="first"><h1>Hello</h1></section>
<section style="background-color: #dadada;" class="second"><h1>Sup</h1></section>
<section style="background-color: #cacaca;" class="third">yo</section>
</div>
<script type="text/javascript">
$(".main").onepage_scroll({
sectionContainer: "section",
easing: "ease-out",
animationTime: 1000,
pagination: true,
updateURL: false,
beforeMove: function(index) {$(this).css("position", "fixed");},
afterMove: function(index) {},
loop: false,
keyboard: true,
responsiveFallback: false,
direction: "vertical"
});
</script>
</body>
Your input is greatly appreciated! Thank you.