javascript - 位置:固定一个元素覆盖其他元素

Question

在我的网站上，很少有元素在向下滚动页面后获得相同的类。它由 JavaScript 运行。问题是元素得到: 位置:固定；顶部:0；左:0；所以当我向下滚动时一个元素覆盖另一个元素，当我向下滚动时我应该怎么做才能使每个元素彼此相邻？

这是我的 fiddle :https://jsfiddle.net/z0hLzw4g/1/

Answer 1

你可以获取第一个元素的高度并将其作为顶部给第二个元素

$('.inelementthree').css({
   position: 'fixed',
   top: $('#elementone').height(),  // instead of top:'0'
   left: '0',
   padding: '0',
   width: '100%'
});

$(document).ready(function() {
  var sticky;
  setTimeout(function() {
    sticky = $('#elementone').offset().top;
    $(window).scroll(function() {
      if ($(window).scrollTop() > sticky)
        $('#elementone').css({
          position: 'fixed',
          top: '0',
          left: '0',
          padding: '0',
          width: '100%'
        });
      else
        $('#elementone').css({
          position: '',
          top: '',
          left: '',
          padding: '',
          width: ''
        });
    });
  }, 100);
});

$(document).ready(function() {
  var sticky;
  setTimeout(function() {
    sticky = $('.inelementthree').offset().top;
    $(window).scroll(function() {
      if ($(window).scrollTop() > sticky)
        $('.inelementthree').css({
          position: 'fixed',
          top: $('#elementone').height(),
          left: '0',
          padding: '0',
          width: '100%'
        });
      else
        $('.inelementthree').css({
          position: '',
          top: '',
          left: '',
          padding: '',
          width: ''
        });
    });
  }, 100);
});

.col-sm-4 {
  width: 33.33333%;
  float: left;
}

.body {
  height: 1000px
}

.inelementthree {
  width: 100%;
  background-color: #f00
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="full">
  <div class="abovetop">
    <span id="elementone">This is element one</span>
  </div>
  <br>
  <div class="top">
    <div class="col-sm-4" id="elementtwo">This is element two</div>
    <div class="col-sm-4" id="elementthree"><span class="inelementthree">This is element three</span></div>
    <div class="col-sm-4" id="elementfour">This is element four</div>
  </div>
  <div class="body">

  </div>
</div>