When Simple CSS Tricks are not that SIMPLE

Simple tricks in CSS/JS for modern day header design

In today's design, we have seen that there has being a lot of fix header design with box shadow when you scroll down. The header remains fixed to the top and you would see a very nice shadow below it as you scroll.
The advantage is that you can navigate the site easily without needing to scrollup, you feel you are still inside the application as you scroll up.

You can see examples from

1. Steemit
2. Stripe
3. Paystack (They have their code open sourced you can check them out)

I love those sites navigation header design. I wanted to implement the header design such that when the user scrolls up, the box shadow nicely appears beneath the navigation.

Nice UI!

Here comes the trouble

If you do not know how to do a particular thing simply do search and read. That is exactly what I did. I look at each sites and searched using simple words combinations like box shadow on scroll css, fixed nav bar JS/CSS and I carefully followed the StackOverflow answers

Now comes the nightmare, it just would not work. I tried for over a night. So I am still trying. I would continue on this post as I fix the issue.