Question

我要创建一个滚动和粘贴div，它必须粘在页面的顶部，但在向下滚动divd旁边的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

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

＆＃13;

$ = 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();
    });

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

JS FIDDLE

您可能想删除stickdiv类并相应地添加它

if (scrollTop >= stop) {
      // get array item by index
      left[0].classList.add('stick'); //adding a class name
      left[0].classList.remove('stickdiv');
    } else {
      // get array item by index
      left[0].classList.remove('stick');
       left[0].classList.add('stickdiv');
    }

将div放在顶部不能正常工作：javascript

2 个答案: