Make any Blogger Widget to Fade In or Fade Out on Scroll

You might have seen this on many blogs, when ever you scroll any content on some blogs, they have a menu that slides and fades away, and when you scroll back on top it pops back up. Yes that’s what the effect I am talking about. Well we have a simple script that will help you to achieve this very effect on any widget or gadget.

You can see the effect live in above example image, how when I scroll down the menu on top fades away and when I scroll back up, it pops back up where it was supposed to be, well actually we are using the Opacity Value using the jQuery, so it pretty basic.

How to Achieve this Fade Out and Fade In Effect on Menu Bar using jQuery Script

The process is pretty basis, you just need the ID of the gadget or Widget. So lets check the detailed step by step tutorial below.

1. Open Blogger > Template > Edit HTML.
2. Press Ctrl + F and search for </body> tag and paste below code above it.

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

    

   <script>var mywindow=$(window);var mypos=mywindow.scrollTop();mywindow.scroll(function(){if(mywindow.scrollTop() > mypos){$('#nav').fadeOut();}else{$('#nav').fadeIn();}mypos=mywindow.scrollTop();});</script>

3. If you are already using jQuery script, then remove the code in RED above and keep the rest code intact.
4. Now just change the Blue small codes you see above with the Widget or Gadget ID.
5. So in case you are using some Widget that has a ID like below, first check that.

   <div id='nav'>

6. Then code between those two semi colons would be the ID name, that you need to replace in above code.
7. After that just Save Template and you will be good to see the effect live, just try implementing this on your blog and enjoy.

---

I hope you enjoyed this tutorial, do comment below in case you face any issues using this script, I will see you in next one.