在范围内向下滚动时元素显示

Question

我在向下滚动页面时使用jquery和css进行了编码，以显示我的联系表单。但是我试图在滚动时设置元素显示的范围。目前，我只设置了向下滚动和隐藏部分。需要开发代码以仅在200px-1024px范围内显示此对象。

任何人对此都有想法。请给我一个答案。

请查看以下动画gif ：https://gph.is/2RpQrOp或https://ibb.co/6y7wCmK

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (1600 > currentScrollPos) {
    document.getElementById("sticky").style.top = "200px";
  } else {
    document.getElementById("sticky").style.top = "-1000px";
  }
  prevScrollpos = currentScrollPos;
}

/* Test contact-sticky*/

.sticky {
  position: fixed;
  transition: top 0.3s;
  top: -1000px;
  left: 827px;
  right: 46px;
  background-color: #ebc11d;
  padding: 50px;
  font-size: 14px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

<p class="sticky">Contact form</p>

Answer 1

标记和CSS几乎没有问题。

1. 您希望ID出现在联系表中。 document.getElementById("sticky")但是没有一个。在那里添加ID或使用getElementByClassName
从班级获取ID
2. 已定义适当的偏移量。为了使此代码段正常工作，我必须将200设置为偏移量。如果您打算支持多种分辨率，那么最好获取完整的文档长度，然后减去200px并将其用作偏移量。
3. 在线样式和样式表样式之间没有冲突的更改。 document.getElementById("sticky").style.top更改行内样式，其中top: -1000px;是从样式表中定义的。

var prevScrollpos = window.pageYOffset;
var currentScrollPos = window.pageYOffset;
if (10 < currentScrollPos && 210 > currentScrollPos) {
    document.getElementById("sticky").style.top = "0px";
  } else {
    document.getElementById("sticky").style.top = "-1000px";
  }
window.onscroll = function() {
  currentScrollPos = window.pageYOffset;
  if (10 < currentScrollPos && 210 > currentScrollPos) {
    document.getElementById("sticky").style.top = "000px";
  } else {
    document.getElementById("sticky").style.top = "-1000px";
  }
  prevScrollpos = currentScrollPos;
}

/* Test contact-sticky*/

.sticky {
  position: fixed;
  transition: top 0.3s;
  background-color: #ebc11d;
  padding: 50px;
  font-size: 14px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p class="sticky" id="sticky">Contact form</p>