Template:Team:DTU-Denmark/css3

From 2014.igem.org

(Difference between revisions)
Line 477: Line 477:
}
}
}
}
-
#ScrollMenu.fixed {
+
.menu {
-
     position: fixed;
+
     background:#345;
-
     top: 0;
+
     color:#FFF;
-
     left: 0;
+
     height:2em;
-
     z-index: 1;
+
     padding:.5em;
-
     width: 100%;
+
    position:absolute;
-
     border-bottom: 5px solid #ffffff;
+
    top:50px;
 +
     width:100%;
 +
}
 +
.fixed {
 +
     position:fixed;
 +
    top:0;
}
}
-
 
</style>
</style>
 +
 +
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10/jquery.min.js"></script>
<script>
<script>
-
$(document).ready(function () { 
+
var num = 50; //number of pixels before modifying styles
-
  var top = $('#ScrollMenu').offset().top - parseFloat($('#ScrollMenu').css('marginTop').replace(/auto/, 100));
+
-
  $(window).scroll(function (event) {
+
-
    // what the y position of the scroll is
+
-
    var y = $(this).scrollTop();
+
-
    // whether that's below the form
+
$(window).bind('scroll', function () {
-
     if (y >= top) {
+
     if ($(window).scrollTop() > num) {
-
      // if so, ad the fixed class
+
        $('.menu').addClass('fixed');
-
      $('#ScrollMenu').addClass('fixed');
+
     } else {
     } else {
-
      // otherwise remove it
+
        $('.menu').removeClass('fixed');
-
      $('#ScrollMenu').removeClass('fixed');
+
     }
     }
-
  });
 
});
});
 +
 +
//USE SCROLL WHEEL FOR THIS FIDDLE DEMO
</script>
</script>
</html>
</html>

Revision as of 11:37, 24 July 2014

Retrieved from "http://2014.igem.org/Template:Team:DTU-Denmark/css3"