Difference between revisions of "Team:Humboldt Berlin/Notebook"

Line 88: Line 88:
  
  
−
         <section class="full-height width-limit notebook">
+
        <div class="fixed-header-container">
 +
            <section class="fixed-image-header">
 +
                <img src="https://static.igem.org/mediawiki/2019/e/e9/T--Humboldt_Berlin--description-header.jpg" alt="notebook" />
 +
            </section>
 +
 
 +
            <h1 class="page-headline description">Notebook</h1>
 +
        </div>
 +
 
 +
         <section class="full-height width-limit notebook fixed-header-content">
 
             <div class="timeline">
 
             <div class="timeline">
−
                 <div class="timeline-month">Januar</div>
+
                 <div class="timeline-month tl-first-element"
−
                 <div class="timeline-dot"></div>
+
                    data-text="Information for january">
−
                 <div class="timeline-month">Februar</div>
+
                    January
−
                 <div class="timeline-month">März</div>
+
                </div>
 +
                 <div class="timeline-dot"
 +
                    data-text="information for inbetween">
 +
                </div>
 +
                 <div class="timeline-month"
 +
                    data-text="Information for february">
 +
                    February
 +
                </div>
 +
                 <div class="timeline-month"
 +
                    data-text="Information for march">
 +
                    March
 +
                </div>
 
             </div>
 
             </div>
 
             <div class="infobox">
 
             <div class="infobox">
Line 104: Line 123:
 
         const infobox = document.querySelector('.infobox');
 
         const infobox = document.querySelector('.infobox');
 
         window.addEventListener("scroll", function () {
 
         window.addEventListener("scroll", function () {
 +
            updateTimeline();
 +
            setFixedElements();
 +
        });
 +
 +
        function setFixedElements() {
 +
            const infobox = document.querySelector('.infobox');
 +
            if (window.pageYOffset >= window.innerHeight) {
 +
                infobox.classList.add('fixed')
 +
            } else {
 +
                infobox.classList.remove('fixed')
 +
            }
 +
        }
 +
 +
        function updateTimeline() {
 
             const elements = document.querySelectorAll('.timeline > div');
 
             const elements = document.querySelectorAll('.timeline > div');
−
       
+
 
 
             [].forEach.call(elements, function(el) {
 
             [].forEach.call(elements, function(el) {
 
                 if (isElementVisible(el)) {
 
                 if (isElementVisible(el)) {
Line 116: Line 149:
 
             const activeElements = document.querySelectorAll('.active-timeline-el');
 
             const activeElements = document.querySelectorAll('.active-timeline-el');
 
             const lastActive = activeElements[activeElements.length - 1]
 
             const lastActive = activeElements[activeElements.length - 1]
−
             infobox.innerHTML = lastActive.innerHTML
+
 
−
         });
+
             if (lastActive !== undefined) {
−
          
+
                infobox.innerHTML = lastActive.getAttribute('data-text')
 +
            }
 +
         }
 +
 
 +
         // rename?
 
         function isElementVisible(el) {
 
         function isElementVisible(el) {
 
             var top = el.offsetTop;
 
             var top = el.offsetTop;
−
       
+
 
 
             while(el.offsetParent) {
 
             while(el.offsetParent) {
 
                 el = el.offsetParent;
 
                 el = el.offsetParent;
 
                 top += el.offsetTop;
 
                 top += el.offsetTop;
 
             }
 
             }
−
       
+
 
 
             return (
 
             return (
−
                 top <= window.pageYOffset + 195
+
                 top <= window.pageYOffset
 
             );
 
             );
 
         }
 
         }
 
     </script>
 
     </script>
 
</html>
 
</html>

Revision as of 06:42, 10 September 2019

notebook

Notebook

January
February
March
infobox