javascript - 滚动 HTML 中的框或图像时出现问题

Question

我们有一个 HTML 页面，里面有一个盒子，盒子是需要提交的表单。无论如何，框的某些部分在当前 View 中，但当我们滚动页面时，某些部分应该是可见的。

我们写了这段代码但是它滚动不流畅，它在跳动!

if (!window.matchMedia('(max-width: 64.063em)').matches &&
        !window.matchMedia('(max-width: 40.063em)').matches) {
            window.onscroll = function() { checkOffset() };

            var boxElement = document.getElementById("box");
            var footerElement = document.getElementById("footer");;

            function checkOffset() {
                function getRectTop(el){
                    var rect = el.getBoundingClientRect();
                    return rect.top;
                }

                if((getRectTop(boxElement) + document.body.scrollTop) + boxElement.offsetHeight >= 
                    (getRectTop(footerElement) + document.body.scrollTop) - 5) {
                    boxElement.style.position = 'absolute';
                    boxElement.style.bottom = 'auto';

                    }

                if(document.body.scrollTop + window.innerHeight < 
                    (getRectTop(footerElement) + document.body.scrollTop)) {
                    boxElement.style.position = 'fixed'; 
                    boxElement.style.bottom = 0;
                    }
            }
        }

任何帮助将不胜感激分离

Answer 1

框的滚动只能通过HTML/CSS来实现，我们不需要JS，如果你有简单的需求，请列出这个。请引用下面的代码并运行它，看看它是否以简单的方式帮助您，如果您向下/向上滚动，框将平滑滚动。

.main {
  height: 2000px;
}
.box {
  width: 100px;
  height: 100px;
  padding: 10px;
  background: #ccc;
  vertical-align: middle;
  text-align: center;
  position: fixed;
  bottom: 10px;
  right: 5px;
}

<div class="main">
<div class="box">
Test
</div>
</div>