如何将div放在页面顶部

debugcn 发表于 Dev

安贾利

我只想将div放在页面顶部

如果有人滚动页面，则绿色divstickdiv应该自动停留在顶部

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;
    if (scrollTop >= stop) {
     left.className += " stick"; //adding a class name
    } else {
        className = '';
    }

}
}

为什么在div上添加Stick类不起作用-https: //jsfiddle.net/kzk5qab2/1/

我只想像上面的黄色div一样将div放在顶部-http: //jsfiddle.net/qc4NR/

貌似

您已经遍历了left项目数组，但是在尝试将类名称添加到元素时忘记了引用数组索引。

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>

如果直接选择项目，甚至不需要循环，如下所示：

var left = document.querySelector(".stickdiv");
var stop = (left.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) {
    left.classList.add('stick'); //adding a class name
  } else {
    left.classList.remove('stick');
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。