January 24th 2018
Hello! Today we did a stick nav in the JavaScript30_days course and it is really fun. The goal was to make the navbar stick to the top of the page even after scrolling down. To do this we have figure out where the top of the nabvar is and as you soon as you hit the top when scrolling down the navbar will follow. In the function we also have to listen to the height window.scrollY and if this value is bigger or equal to the top of the nabvar we add a class of fixed-nav and with the help of css we make it stick.
The thing I learned also is to put a class on the body so it is easier to target its children. E.g.
document.body.classList.add('fixed-nav');
You can achieve this with the classList.
When you make an element fixed like in the case of fixed-nav it no longer takes up space. This causes a reflow. It moves the .site-wrap class up the exact amount of pixels the nav gave up. To fix this we have to offset that amount by adding padding.
document.body.style.paddingTop = nav.offsetHeight + 'px';
document.body.style.paddingTop = 0;
In the CSS grid course we learned about the sizing of the grid. Instead of pixels we could use the “fr” or fractional unit which represents the amount of space left after all the elements are laid out. This much is left (fr) so the grid will take up that space. So basically the free space is taken up by the fr.
grid-template-columns: 100px 1fr 1fr.
Also, we have the repeat(), which can be used to specify how many times we want to repeat certain values
Grid-template-columns: repeat(4, 1fr, 2fr);
In the Web Development Bootcamp I successfully solved a function problem set for which I am very proud. I now understand more how loops work with arrays, and I used forEach a lot too.
Cheers!