Team:UT-Dallas
From 2014.igem.org
(Difference between revisions)
Line 4: | Line 4: | ||
<script src="https://2014.igem.org/Team:UT-Dallas/jquery.js?action=raw&ctype=text/javascript"></script> | <script src="https://2014.igem.org/Team:UT-Dallas/jquery.js?action=raw&ctype=text/javascript"></script> | ||
<script src="https://2014.igem.org/Team:UT-Dallas/jquery.scrollmagic.min.js?action=raw&ctype=text/javascript"></script> | <script src="https://2014.igem.org/Team:UT-Dallas/jquery.scrollmagic.min.js?action=raw&ctype=text/javascript"></script> | ||
+ | <div id="content_body"> | ||
<section id="titlechart"> | <section id="titlechart"> | ||
<div id="top_bar">jeht;aerht</div> | <div id="top_bar">jeht;aerht</div> | ||
Line 29: | Line 30: | ||
<script> | <script> | ||
$(document).ready(function($) { | $(document).ready(function($) { | ||
- | + | // define params | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
var duration = $("#parallax1").height() + $(window).height(); | var duration = $("#parallax1").height() + $(window).height(); | ||
var bgPosMovement = "0 " + (duration*0.8) + "px"; | var bgPosMovement = "0 " + (duration*0.8) + "px"; | ||
Line 85: | Line 49: | ||
.setTween(TweenMax.to("#parallax3", 1, {backgroundPosition: bgPosMovement, ease: Linear.easeNone})) | .setTween(TweenMax.to("#parallax3", 1, {backgroundPosition: bgPosMovement, ease: Linear.easeNone})) | ||
.addTo(controller); | .addTo(controller); | ||
+ | |||
+ | //this is the floating content | ||
+ | var $floatingbox = $('#top_bar'); | ||
+ | if ($('#content_body').length > 0) | ||
+ | { | ||
+ | |||
+ | var bodyY = parseInt($('#content_body').offset().top) - 20; | ||
+ | var originalX = $floatingbox.css('margin-left'); | ||
+ | $(window).scroll(function() { | ||
+ | var scrollY = $(window).scrollTop(); | ||
+ | var isfixed = $floatingbox.css('position') == 'fixed'; | ||
+ | if ($floatingbox.length > 0) { | ||
+ | $floatingbox.html("srollY : " + scrollY + ", bodyY : " + bodyY + ", isfixed : " + isfixed); | ||
+ | if (scrollY > bodyY && !isfixed) { | ||
+ | $floatingbox.stop().css({ | ||
+ | position: 'fixed', | ||
+ | left: '50%', | ||
+ | top: 20, | ||
+ | marginLeft: -500 | ||
+ | }); | ||
+ | } else if (scrollY < bodyY && isfixed) { | ||
+ | $floatingbox.css({ | ||
+ | position: 'relative', | ||
+ | left: 0, | ||
+ | top: 0, | ||
+ | marginLeft: originalX | ||
+ | }); | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | } | ||
}); | }); | ||
</script> | </script> | ||
</section> | </section> | ||
- | + | </div> | |
</html> | </html> |
Revision as of 19:00, 17 October 2014
jeht;aerht
Content 1
view sourceContent 2
view source