javascript - 将 div 置于顶部无法正常工作 : javascript

Question

我将创建一个滚动和粘贴 div，它必须粘贴在页面顶部，但向下滚动 Stickdiv 旁边的 div 时，会自动粘贴到粘性 div 之前的 div

var left = document.getElementsByClassName("stickdiv");

for (var i = 0; i < left.length; i++) {
  var stop = (left[0].offsetTop);

  window.onscroll = function(e) {
    var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
    // left.offsetTop;
    if (scrollTop >= stop) {
      // get array item by index
      left[0].classList.add('stick'); //adding a class name
    } else {
      // get array item by index
      left[0].classList.remove('stick');
    }
  }
}

.stickdiv {
  height: 50vh!important;
  width: 100vh!important;
  background-color: green!important;
}
.stick {
  position: fixed;
  top: 0;
  margin: 0 0
}
#right {
  float: right;
  width: 100px;
  height: 1000px;
  background: red;
}
.des {
  height: 300px;
  width: 100%;
  background-color: #000;
}

<div class="des"></div>
<div class="stickdiv"></div>
<div id="right"></div>

示例:绿色 div 是粘性 div，但向下滚动后，红色也会粘住，我已经尝试过在 css 中使用绝对位置，但不知道如何修复它

Answer 1

这是滚动时使绿色粘滞的代码。

$ = document.querySelectorAll.bind(document);
  // how far is the green div from the top of the page?
  var initStickyTop = $(".stickdiv")[0].getBoundingClientRect().top + pageYOffset;
  // clone the green div
  var clone = $(".stickdiv")[0].cloneNode(true);
  // hide it first
  clone.style.display = "none";
  // add it to dom
  document.body.appendChild(clone);
    addEventListener("scroll",stick=function() {
      // if user scroll past the sticky div
      if (initStickyTop < pageYOffset) {
        // hide the green div but the div still take up the same space as before so scroll position is not changed
        $(".stickdiv")[0].style.opacity = "0";
        // make the clone sticky
        clone.classList.add('stick');
        // show the clone
        clone.style.opacity="1";
        clone.style.display = "block";
      } else {
        // make the clone not sticky anymore
        clone.classList.remove("stick");
        // hide it
        clone.style.display = "none";
        // show the green div
        $(".stickdiv")[0].style.opacity="1";
      };
    });
    // when resize, recalculate the position of the green div
    addEventListener("resize", function() {
      initStickyTop = $(".stickdiv")[0].getBoundingClientRect().top + pageYOffset;
      stick();
    });

.stickdiv {
  height: 50vh!important;
  width: 100vh!important;
  background-color: green!important;
}
.stick {
  position: fixed;
  top: 0;
  margin: 0 0
}
#right {
  float: right;
  width: 100px;
  height: 1000px;
  background: red;
}
.des {
  height: 300px;
  width: 100%;
  background-color: #000;
}

<div class="des"></div>
<div class="stickdiv"></div>
<div id="right"></div>