Merge pull request StartBootstrap#62 from Deadolus/gh-pages

Fading the "Scroll to Top" button in and out
hzhao16 · Jan 29, 2016 · 1e9461a · 1e9461a
2 parents 0c71c75 + 71464c1
commit 1e9461a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -287,7 +287,7 @@ <h3>About Freelancer</h3>
     </footer>
 
     <!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) -->
-    <div class="scroll-top page-scroll visible-xs visible-sm">
+    <div class="scroll-top page-scroll hidden-sm hidden-xs hidden-lg hidden-md">
         <a class="btn btn-primary" href="#page-top">
             <i class="fa fa-chevron-up"></i>
         </a>

diff --git a/js/cbpAnimatedHeader.js b/js/cbpAnimatedHeader.js
@@ -28,9 +28,15 @@ var cbpAnimatedHeader = (function() {
 		var sy = scrollY();
 		if ( sy >= changeHeaderOn ) {
 			classie.add( header, 'navbar-shrink' );
-		}
+            $('.scroll-top').removeClass('hidden-sm hidden-xs');
+            $('.scroll-top').fadeIn(500);
+            }
 		else {
 			classie.remove( header, 'navbar-shrink' );
+            $('.scroll-top').fadeOut(500,  function() {
+            $('.scroll-top').addClass('hidden-sm hidden-xs');
+            });
+
 		}
 		didScroll = false;
 	}
@@ -41,4 +47,4 @@ var cbpAnimatedHeader = (function() {
 
 	init();
 
-})();
+})();