|
|
| Line 488: |
Line 488: |
| | $("#dot-side-bar").html(dots.join().replace(/,/g,'')); | | $("#dot-side-bar").html(dots.join().replace(/,/g,'')); |
| | }); | | }); |
| − |
| |
| − |
| |
| − |
| |
| − | $(document).ready(function(){
| |
| − | var dotslist = document.getElementsByClassName("sidebar-switch");
| |
| − | var sidebar = document.getElementsByClassName("sidebar-content");
| |
| − | var subtitles = document.getElementsByClassName("section");
| |
| − | var items = document.getElementsByClassName("sidebar-item");
| |
| − | var borders = [0];
| |
| − | for (var i = 0; i <= subtitles.length - 1; i++) {
| |
| − | borders.push($(".section")[i].offset.left);
| |
| − | }
| |
| − | borders.shift();
| |
| − | borders.push(borders[borders.length-1]+100000);
| |
| − | $(window).scroll(function(){
| |
| − | console.log(borders);
| |
| − | console.log(sidebar);
| |
| − | for (var i = 0; i <= subtitles.length; i++) {
| |
| − | if (window.pageYOffset >=borders[i]-800){
| |
| − | if(window.pageYOffset <=borders[i+1]-800) {
| |
| − | sidebar[i].style.display = "inline-block";
| |
| − | sidebar[i].style.width = "180px";
| |
| − | items[i].firstChild.style.backgroundColor = "#638695";
| |
| − | }
| |
| − | else{
| |
| − | sidebar[i].style.display = "none";
| |
| − | items[i].firstChild.style.backgroundColor = "#bbb";
| |
| − | }
| |
| − | }
| |
| − | else{
| |
| − | sidebar[i].style.display = "none";
| |
| − | items[i].firstChild.style.backgroundColor = "#bbb";
| |
| − | }
| |
| − | }
| |
| − | });
| |
| − |
| |
| − | $(".sidebar-item").mouseenter(function(){
| |
| − | this.lastChild.style.display = "inline-block";
| |
| − | sidebar[i].style.width = "180px";
| |
| − | });
| |
| − | $(".sidebar-item").mouseleave(function(){
| |
| − | this.lastChild.style.display = "none";
| |
| − | });
| |
| − | });
| |
| − |
| |
| | | | |
| | </script> | | </script> |
| Line 547: |
Line 502: |
| | height: 50px; | | height: 50px; |
| | } | | } |
| − | .sidebar-item:hover .sidebar-switch{
| + | .sidebar-content{ |
| − | color:orange;
| + | |
| − | }
| + | |
| − | .sidebar-item:hover .sidebar-content{
| + | |
| | display: inline-block; | | display: inline-block; |
| | position:absolute; | | position:absolute; |
