A Scroll hint that fades out when the page is scrolled down

More in Plugins, Scripting and Styling

This is a quick solution I just programmed for a client that allows displays a down arrow "scroll hint" locked to the bottom of the browser window that slowly fades out as the page is scrolled down and  quickly fades back in if the page is scrolled back to the top. 

The solution is a combination of jQuery code and custom CSS. 

Remember: You'll need a link to the main jQuery library as the first item in your sitewide header injection point for the code below to work. If you already have the link to the main jQuery library you can skip to The jQuery Code, below. 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

---

The jQuery Code

<script>
$(window).scroll(function(){
    offset = $(this).scrollTop();
    if (offset > 100) {
        $("body:not(.scrolled)").addClass("scrolled");
   }
   else
   {
       $("body.scrolled").removeClass("scrolled");   
   }
});
</script>

---

The Custom CSS

body:before {
   font-family: "squarespace-ui-font";
   content:"\e009";
   position:fixed;
   bottom:0;
   width:10%;
   text-align:center;
   z-index:1000;
   display:block;
   color:#333;
   font-size:6vw;
   background-color: rgba(54, 64, 36, 0.5);
   margin-left:45%;
   margin-right:45%;
   padding:.3em .1em;
   -webkit-transition: opacity 1s ease-in-out;
   -moz-transition: opacity 1s ease-in-out;
   -ms-transition: opacity 1s ease-in-out;
   -o-transition: opacity 1s ease-in-out;

 }

 .scrolled:before {
   -webkit-transition: opacity 2s ease-in-out;
   -moz-transition: opacity 2s ease-in-out;
   -ms-transition: opacity 2s ease-in-out;
   -o-transition: opacity 2s ease-in-out;
   opacity: 0;
 }

---