Difference between revisions of "Team:Cambridge-JIC/TestHome"
(17 intermediate revisions by the same user not shown) | |||
Line 12: | Line 12: | ||
#sidebar { | #sidebar { | ||
position:fixed; | position:fixed; | ||
− | top: | + | 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> | ||
Line 28: | Line 40: | ||
$(this).css("cursor", "pointer") | $(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(){ | $("section").each(function(){ | ||
− | $("#sidebar").append(" | + | 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 id="sidebar"></div> |
Latest revision as of 02:18, 4 August 2015