问题描述
我有这样的代码:
<a href="/form" class="fixed-bottom" ><button type="submit" style="margin-left: auto;margin-right: auto;display: block; name="submit" class="btn btn-primary">...</button></a>
此问题固定在移动网页的下方 我想在页面向下滚动时隐藏按钮,并在向上滚动页面时显示
解决方法
您必须在此处使用javascript事件,才能检测页面上的滚动事件。
在下一个示例中,有一个初始滚动位置设置为0。您只需要将此值与页面的当前顶部距离进行比较即可。
var scrollPos = 0;
// adding scroll event
window.addEventListener('scroll',function(){
// detects new state and compares it with the new one
if ((document.body.getBoundingClientRect()).top > scrollPos) {
// change here the style of your button
console.log('going up');
else {
// change here the style of your button
console.log('going down');
// saves the new position for iteration.
scrollPos = (document.body.getBoundingClientRect()).top;
}
});