位置：固定一个元素覆盖其他元素

Question

在我的网站上滚动页面后几个元素获得相同的类。它是由JavaScript运行的。问题是元素得到：     position:fixed; top:0; left:0; 当我向下滚动时，一个元素覆盖了另一个元素，当我向下滚动时，我应该怎样做才能使每个元素彼此相邻？

这是我的小提琴：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>

Answer 2

HTML

  "Data": {
    "DefaultConnection": {
      "ConnectionString": "data source=(local)\\SQLEXPRESS;initial catalog=<your_db_name>;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework"
    }
  }

的jQuery

<div class="container">
  <section class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
      <ul>
        <li>This is element one</li>
        <li>This is element two</li>
        <li>This is element three</li>
        <li>This is element four</li>
      </ul>
    </div>
  </section>
</div>

您可以更好地了解https://jsfiddle.net/iszwnc/8gdttef4/，如果这是正确的答案，我会更加努力地记录它。

Answer 3

我刚刚在这里更新了你的小提琴： https://jsfiddle.net/uh71mrvb/

可能会删除左：0; 并将宽度更改为＆＃34; auto＆＃34;当元素被修复可能会成功吗？

祝你好运！

$(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: 'relative',
          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: '0',
          padding: '0',
          width: 'auto'
        });
      else
        $('.inelementthree').css({
          position: '',
          top: '',
          left: '',
          padding: '',
          width: ''
        });
    });
  }, 100);
});