所以我有一个按钮,我想在用户向下滚动页面时自动隐藏它,并在用户向上滚动时显示它。以下是代码:
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);
}
代码运行良好;该按钮确实根据滚动方向隐藏/显示。但问题是,它没有动画,即它会瞬间隐藏和显示,而不是上下滑动。知道是什么原因造成的吗?提前致谢!
编辑:通过在 .scrollToTop.hidden{}
中添加 display: inline !important;
来修复此问题
最佳答案
对我来说,您可以找到 turbolinks 问题 here ,在他们谈论 rails 5 的链接中,大约 4 有类似的问题。
关于javascript - CSS 动画在 Rails 应用程序中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38079412/