Difference between revisions of "Team:Cambridge-JIC/TestHome"
(34 intermediate revisions by the same user not shown) | |||
Line 6: | Line 6: | ||
width: 256px; | width: 256px; | ||
height:256px; | height:256px; | ||
− | background: url(//2015.igem.org/wiki/images/b/be/CamJIC-Downarrow.png) | + | background: url(//2015.igem.org/wiki/images/b/be/CamJIC-Downarrow.png); |
+ | z-index:1; | ||
+ | position:relative; | ||
+ | } | ||
+ | #sidebar { | ||
+ | position:fixed; | ||
+ | top:130px; | ||
+ | right:20px; | ||
+ | width: 23px; | ||
+ | z-index:1; | ||
+ | } | ||
+ | |||
+ | .sidebar-item { | ||
+ | width: 20px; | ||
+ | height:20px; | ||
+ | float: left; | ||
+ | border-radius: 50%; | ||
+ | border: #555 solid; | ||
+ | margin-bottom: 5px; | ||
+ | cursor:pointer; | ||
} | } | ||
</style> | </style> | ||
<script> | <script> | ||
− | $(window). | + | $(window).ready(function(){ |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | $(".downarrow").each(function(){ | ||
+ | if($(this).attr("id") !== "overlay") { | ||
+ | $(this).on("click", function(){ | ||
+ | console.log($(this).parents("section").next().offset().top) | ||
+ | $("html, body").animate({ scrollTop: $(this).parents("section").next().offset().top }, 1000); | ||
+ | }) | ||
+ | $(this).css("cursor", "pointer") | ||
+ | } | ||
}) | }) | ||
$(window).on("resize", function(){ | $(window).on("resize", function(){ | ||
+ | |||
+ | $("#sidebar").offset({right: $(".cam-container section:first-of-type div").offset().right - 30}) | ||
if($(".navbar-collapse").is(":visible")) { | if($(".navbar-collapse").is(":visible")) { | ||
$(".downarrow").show() | $(".downarrow").show() | ||
+ | $("#sidebar").show() | ||
} else { | } else { | ||
$(".downarrow").hide() | $(".downarrow").hide() | ||
+ | $("#sidebar").hide() | ||
} | } | ||
+ | |||
+ | }).resize(); | ||
+ | |||
+ | var ix = 0; | ||
+ | $("section").each(function(){ | ||
+ | if($(this).attr("id") != "footer-sec") { | ||
+ | $("#sidebar").append("<div onclick=\"scrollsection("+ix+")\" class=\"sidebar-item\""+(ix==0?" style=\"background: #555\"":"")+"></div>") | ||
+ | } | ||
+ | ix++ | ||
+ | }) | ||
+ | |||
+ | |||
+ | |||
+ | $(window).on("scroll", function(){ | ||
+ | var i=0; | ||
+ | $("section").each(function(){ | ||
+ | if($(this).offset().top <= $(window).scrollTop()) { | ||
+ | $(".sidebar-item").css("background", "none") | ||
+ | $($(".sidebar-item").get(i)).css("background", "#555") | ||
+ | } | ||
+ | i++; | ||
+ | }) | ||
+ | }) | ||
+ | |||
+ | $(window).on("scroll", function(){ | ||
+ | |||
+ | $('.downarrow').each(function(){ | ||
+ | var position = $(this).offset().top +$(this).height()/2 - $(window).scrollTop(); | ||
+ | $(this).css("opacity", position/$(window).height()) | ||
+ | }) | ||
+ | |||
+ | }) | ||
}); | }); | ||
+ | |||
+ | function scrollsection(id) { | ||
+ | $("html, body").animate({ scrollTop: $($("section").get(id)).offset().top }, 1000); | ||
+ | } | ||
</script> | </script> | ||
+ | <div id="sidebar"></div> | ||
− | <div class="downarrow" id="overlay" style="background:url(//2015.igem.org/wiki/images/6/60/CamJIC-Overlay_guide.png); background-size: 100% 100%;width:100%;height:27%;position:absolute"></div> | + | <div class="downarrow" id="overlay" style="background:url(//2015.igem.org/wiki/images/6/60/CamJIC-Overlay_guide.png); background-size: 100% 100%;width:100%;height:27%;position:absolute;z-index:0"></div> |
− | <section id="intro" style="background-color: #fff;"> | + | <section id="intro" style="background-color: #fff; padding-top:0"> |
<div class="slide" style="background-image: url(//2015.igem.org/wiki/images/f/f8/CamJIC-Panel-Main.png)" data-mobimg="url(//2015.igem.org/wiki/images/f/f8/CamJIC-Logo2.png)"> | <div class="slide" style="background-image: url(//2015.igem.org/wiki/images/f/f8/CamJIC-Panel-Main.png)" data-mobimg="url(//2015.igem.org/wiki/images/f/f8/CamJIC-Logo2.png)"> | ||
<div style="width: 40%; margin: 450px 530px;"></div> | <div style="width: 40%; margin: 450px 530px;"></div> |
Latest revision as of 02:18, 4 August 2015