Question

我有这样的代码：

<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>

此问题固定在移动网页的下方我想在页面向下滚动时隐藏按钮，并在向上滚动页面时显示

Answer 1

您必须在此处使用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;
  }
});

you have a working codepen here showing the example live

屏幕滚动时隐藏按钮，向上滚动时显示

1 个答案: