javascript - 如何在页面顶部将多个div设置为 “position: fixed and top:0”

Question

我们想要对齐 div 在运行时动态地固定在顶部。现在固定顶部一直在工作。但我的问题是 2 个不同的 div 一个接一个地出现在相同的位置。所以我们看不到其他 div，所以我们想这样做 我们在 JSFiddle 中尝试一些事情请检查下面的代码，请帮助解决这个问题。

var fixmeTop = $('.fixme').offset().top;
        $(window).scroll(function() {
            var currentScroll = $(window).scrollTop();
            if (currentScroll >= fixmeTop) {
                $('.fixme').css({
                    position: 'fixed',
                    top: '0',
                    left: '0'
                });
            } else {
                $('.fixme').css({
                    position: 'static'
                });
            }
        });

JSFiddle example

Answer 1

var counter = 0;
var height = 0;

$('.fixme').each(function() {
  if (counter > 0) {
    height = height + $(this).outerHeight();
    $(this).css({
      'top': height + 'px'
    });
  }
  counter++;
});

body {
  height: 200vh;
}

.fixme {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #E4E4E4;
  border: 1px solid #000;
  text-align: center;
  padding: 2%;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="fixme">fixed item 1</div>
<div class="fixme">fixed item 2</div>
<div class="fixme">fixed item 3</div>