所以我有一个按钮,我想在用户向下滚动页面时自动隐藏,并在用户向上滚动时显示。以下是代码:
的application.js
[FindsBy(How = How.Name, Using = "role")]
public ReadOnlyCollection<IWebElement> radPercentage { get; }
index.html.haml
radPercentage[2].Click();
autohide.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
application.css.scss
%a.scrollToTop{:href => "#"}
代码工作正常;按钮会隐藏/显示,具体取决于滚动方向。但问题是,它没有动画,即它瞬间隐藏和显示而不是上下滑动。知道是什么导致了这个吗?提前谢谢!
编辑:通过在$(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;
});
});
/*
*= 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);
}
来修复此错误