How to add css3 shadow effect to website header on scroll

How to add smooth css3 shadow effect to website header when user scrolls down

Add css3 shadow effect to website header when user scrolls down - pepfry

Add css3 shadow effect to website header when user scrolls down

If you were looking to add css3 shadow effect to header – then, you have landed in the right place. Now, it has become a trend that every website designers want to keep the header along with the navigation and brand logo fixed, even when the user scrolls down the website. Its done using a simple JavaScript and Css3 shadow effect styles.

I have this tutorial compiled with the complete solution with which you can accomplish your need of applying css3 shadow effect to the bottom of the header when user scrolls down your website.

For you to achieve this – you just have to have knowledge about basic HTML and JavaScript usage. However – I will also be explaining all the steps including writing basic HTML, applying styles, script and attaching jQuery library for the script to run successfully when your website is loaded in browser.

Getting you started with CSS3 shadow effect!

Here is a simple markup to demonstrate the example:

So, that was the markup. I’ve made it very simple. You can go ahead and create the Navigation section and also add the Logo. So that you can see a complete functional header section along with Logo and Navigation menu.

What’s next?

Here is a simple script which you have to add to the <head> </head> section.

 Here is the jQuery library required

Please download the latest jquery library from jquery.com!

So, that was the script. It s so simple and it says what it does. I’ll explain what the script is doing there:

The script first checks if the page has been scrolled or not scrolled. If it is not scrolled – it will be set to ‘0‘. When the user starts to scroll down the website – It will be set to ‘1‘. If scroll is set to ‘1‘ it will change/overwrite the existing styles to what you want when the user scrolls down the website. If scroll is set to ‘0‘ – it will keep the existing/default styles.

The CSS3 shadow effect for the header is written within the script. You can do it the other way by writing it in the stylesheet itself and let the Script toggle between the style class that you want when user scrolls down the website.

What’s next?

You will have to add some default styles into the styles section to hold the default styles when the user has not scrolled down the website. This style can unload, over burden on the script.

So, that was the styles  which is so simple. Just add the above styles into the style section of the html page.

What’s next?

Nothing left to do – You’ve done with everything. You have to just run the HTML page on your favorite browser and see the example working!!

Hope you are happy with this tutorial!

If you have any queries, please do not hesitate to ask me or write it on the comment section below.

Please, make sure that you check the checkbox below the comments form [Notify me of follow-up comments by email]. So that you can get notified when I reply back to your comments.

Also, check the checkbox below the comments form [Notify me of new posts by email]. So that you are kept notified when I post a new tutorial.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">