Hello I've been using skrollr js to create a parallax website. However, the issue arises when determining the section height, as it depends on the content within. My goal is to locate the last attribute and adjust the number value based on the section height.
For instance:
For section 1, the data-800 attribute will be
data-800="position:fixed;top:-$('section 1').height;"For section 2, the data-900 attribute will be
data-900="position:fixed;top:-$('section 2').height;"The ultimate objective is to dynamically set the height for each section in the attribute.
$('section').attr('data-800', 'position:fixed;top:-' + $('.section').height());
var s = skrollr.init({
render: function(data) {
console.log(data.curTop);
}
});html,
body {
margin: 0;
height:100%;
}
.grad0 {
height:100%;
position:fixed;
top:0px;
background-color: #FFAAAA;
background-image: url(https://production-assets.codepen.io/assets/profile/profile-bg-8ff33bd9518be912289d4620cb48f21eb5c9a2e0b9577484126cfe10a5fb354f.svg);
}
.grad1 {
position:fixed;
height:100vh;
background-color: #00FF00
}
.grad2 {
position:fixed;
top:800px;
background-color: #0000FF
}
.grad3 {
position:fixed;
top:1200px;
height:400px;
background-color: #00FFFF
}
section {
width:100%;
}
img {
position: absolute;
top:150px;
}<section class="grad0 w60" data-0="top:0px;" data-400="top:0px;" data-800="position:fixed;top:-400px;">
<img src="http://www.cs.cmu.edu/~chuck/lennapg/len_top.jpg" data-0="left:0px" data-400="left:1600px;">
</section>
<section class="grad1" data-400="position:fixed;top:638px;height:100vh;" data-900="position:fixed;top:-400px;">
<h1>Hello World</h1>
</section>
<section class="grad2" data-0="position:fixed;top:800px;" data-400="position:fixed;top:800px;height:100vh;" data-800="position:fixed;top:000px;">
content
</section>
<section class="grad3" data-0="position:fixed;top:1200px;" data-400="position:fixed;top:1200px;" data-800="position:fixed;top:400px;">
content
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js'></script>