Line 69: | Line 69: | ||
<br><br> | <br><br> | ||
− | <div class="fixed_flyer" id = " | + | <div class="fixed_flyer" id = "sec4" style="position:relative;z-index:4"> |
<div class = "h1">Model Building Process</div> | <div class = "h1">Model Building Process</div> | ||
</div> | </div> | ||
Line 168: | Line 168: | ||
</div> | </div> | ||
− | <div class="fixed_flyer" id = " | + | <div class="fixed_flyer" id = "sec5" style="position:relative;z-index:5"> |
<div class = "h1">Discussion</div> | <div class = "h1">Discussion</div> | ||
</div> | </div> | ||
Line 174: | Line 174: | ||
</div> | </div> | ||
− | <div class="fixed_flyer" id = " | + | <div class="fixed_flyer" id = "sec6" style="position:relative;z-index:6"> |
<div class = "h1">References</div> | <div class = "h1">References</div> | ||
</div> | </div> | ||
Line 188: | Line 188: | ||
<br><br><br><br><br> | <br><br><br><br><br> | ||
</body> | </body> | ||
− | + | <script> | |
+ | $(document).ready(function(){ | ||
+ | var sec1=$(".fixed_flyer#sec1"); | ||
+ | var sec1_pos=sec1.offset().top; | ||
+ | var sec2=$(".fixed_flyer#sec2"); | ||
+ | var sec2_pos=sec2.offset().top; | ||
+ | var sec3=$(".fixed_flyer#sec3"); | ||
+ | var sec3_pos=sec3.offset().top; | ||
+ | var sec4=$(".fixed_flyer#sec4"); | ||
+ | var sec4_pos=sec4.offset().top; | ||
+ | var sec5=$(".fixed_flyer#sec5"); | ||
+ | var sec5_pos=sec5.offset().top; | ||
+ | var sec6=$(".fixed_flyer#sec6"); | ||
+ | var sec6_pos=sec6.offset().top; | ||
+ | $(window).scroll(function () { | ||
+ | var y=$(this).scrollTop(); | ||
+ | console.log('new position-----------------------'); | ||
+ | console.log('y:',y); | ||
+ | console.log('sec1:', sec1_pos); | ||
+ | console.log('sec2:', sec2_pos); | ||
+ | console.log('sec3:', sec3_pos); | ||
+ | console.log('sec4:', sec3_pos); | ||
+ | if(y<sec2_pos-50){ | ||
+ | if (y>sec1_pos){ | ||
+ | console.log('sec 1 supposed to move'); | ||
+ | sec1.stop().animate({'top':y-sec1_pos+18},1); | ||
+ | } | ||
+ | } else { | ||
+ | sec1.stop().animate({'top':10},1); | ||
+ | }; | ||
+ | if(y<sec3_pos-50){ | ||
+ | if(y>sec2_pos){ | ||
+ | console.log('sec 2 supposed to move'); | ||
+ | sec2.stop().animate({'top':y-sec2_pos+18},1); | ||
+ | } | ||
+ | } else { | ||
+ | sec2.stop().animate({'top':10},1); | ||
+ | }; | ||
+ | if(y<sec4_pos-40){ | ||
+ | if(y>sec3_pos){ | ||
+ | console.log('sec 3 supposed to move'); | ||
+ | sec3.stop().animate({'top':y-sec3_pos+18},1); | ||
+ | } | ||
+ | } else { | ||
+ | sec3.stop().animate({'top':10},1); | ||
+ | }; | ||
+ | if(y<sec5_pos-40){ | ||
+ | if(y>sec4_pos){ | ||
+ | console.log('sec 4 supposed to move'); | ||
+ | sec4.stop().animate({'top':y-sec4_pos+18},1); | ||
+ | } | ||
+ | } else { | ||
+ | sec4.stop().animate({'top':10},1); | ||
+ | }; | ||
+ | if(y<sec6_pos-40){ | ||
+ | if(y>sec5_pos){ | ||
+ | console.log('sec 5 supposed to move'); | ||
+ | sec5.stop().animate({'top':y-sec5_pos+18},1); | ||
+ | } | ||
+ | } else { | ||
+ | sec5.stop().animate({'top':10},1); | ||
+ | }; | ||
+ | if(y<3000){ | ||
+ | if(y>sec6_pos){ | ||
+ | console.log('sec 6 supposed to move'); | ||
+ | sec6.stop().animate({'top':y-sec6_pos+18},1); | ||
+ | } | ||
+ | } else { | ||
+ | sec6.stop().animate({'top':10},1); | ||
+ | }; | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
</html> | </html> |
Revision as of 14:39, 19 October 2016