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"> | + | <div class="timeline-month tl-first-element" |
− | <div class="timeline-dot"></div> | + | data-text="Information for january"> |
− | <div class="timeline-month"> | + | January |
− | <div class="timeline-month"> | + | </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. | + | |
− | } | + | 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 | + | top <= window.pageYOffset |
); | ); | ||
} | } | ||
</script> | </script> | ||
</html> | </html> |
Revision as of 06:42, 10 September 2019
![notebook](https://static.igem.org/mediawiki/2019/e/e9/T--Humboldt_Berlin--description-header.jpg)
Notebook
January
February
March
infobox