So I have a button that I want to auto-hide when the user scrolls down the page and show when the user scrolls up. Below are the codes:
application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
//= require jquery.infinitescroll
index.html.haml
%a.scrollToTop{:href => "#"}
autohide.js
$(document).ready(function(){
var prev = 0;
var $window = $(window);
var bar = $('.scrollToTop');
$window.on('scroll', function(){
var scrollTop = $window.scrollTop();
bar.toggleClass('hidden', scrollTop > prev);
prev = scrollTop;
});
});
application.css.scss
/*
*= require_tree .
*= require_self
*/
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";
.scrollToTop{
width:70px;
height:70px;
background: #fff;
font-weight: bold;
position:fixed;
bottom:20px;
right:20px;
border-radius:50%;
box-shadow: 0 2px 5px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.24);
-webkit-transform: translateZ(0);
transition: transform 1s
}
.scrollToTop:hover{
box-shadow: 0 10px 20px rgba(0,0,0,0.25), 0 8px 8px rgba(0,0,0,0.22);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.scrollToTop.hidden{
transform: translateY(100px);
}
The code works fine; the button does hide/show depending on the scroll direction. But the problem is, it doesn't animate i.e. it instantaneously hides and shows instead of sliding up and down. Any idea what's causing this? Thanks in advance!
EDIT: Fixed it by adding display: inline !important; inside .scrollToTop.hidden{}
