如何將div放在頁面頂部

Question

我只想將div放在頁面頂部

如果有人滾動頁面，則綠色div stickdiv應該自動stickdiv在頂部

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/

Answer 1

您已經遍歷了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');
  }
}

Answer 2

根據您需要支持的瀏覽器，您不一定需要使用JS。

.sticky {
    position: sticky;
    left: 0;
    top: 0;
    width: 100%;
}

Codepen： https ：//codepen.io/afisher88/pen/xJaxoP

瀏覽器對位置粘性的支持： https : //caniuse.com/#search=position%3A%20sticky