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
-
//floating box
+
-
var $floatingbox = $('#top_bar');
+
-
+
-
if($('#body').length > 0){
+
-
+
-
  var bodyY = parseInt($('#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
+
-
});
+
-
}
+
-
  }
+
-
  });
+
-
}
+
-
// 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 source

Content 2

view source