javascript - 滚动时不能将一个 div 粘在另一个下面

Question

我有一个 div 在另一个下面。我希望他们在滚动时将一个放在页面顶部的另一个下面。 我的代码看起来像这样-

function sticky_relocate() {
  var window_top = $(window).scrollTop();
  var div_top = $('#sticky-anchor').offset().top;
  if (window_top > div_top) {
    $('#sticky').addClass('stick');
$('#sticky2').addClass('stick');
  } else {
    $('#sticky').removeClass('stick');
$('#sticky2').removeClass('stick');
  }
}

$(function() {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
});

#sticky {
  padding: 0.5ex;
  width: 600px;
  background-color: #333;
  color: #fff;
  font-size: 2em;
  border-radius: 0.5ex;
}
  #sticky2 {
  padding: 0.5ex;
  width: 600px;
  background-color: #333;
  color: #fff;
  font-size: 2em;
  border-radius: 0.5ex;
}

#sticky.stick {
  position: fixed;
  top: 0;
  z-index: 10000;
  border-radius: 0 0 0.5em 0.5em;
}
#sticky2.stick {
  position: fixed;
  top: 0;
  z-index: 10000;
  border-radius: 0 0 0.5em 0.5em;
}

<div id="sticky-anchor"></div>
<div id="sticky">This will stay at top of page</div>
<div id="sticky2">This will stay at top of page 2</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

但在 UI 中，div 相互重叠。 我想要一个在另一个下面。 我有 2 个单独的 div。

我的 codepen . 我希望第二个贴在第一个下面。

Answer 1

把你的id改成class，因为你不能重复同一个id名字

<div class="sticky">This will stay at top of page</div>
<div class="sticky">This will stay at top of page 2</div>

.sticky {
  padding: 0.5ex;
  width: 600px;
  background-color: #333;
  color: #fff;
  font-size: 2em;
  border-radius: 0.5ex;
}

.sticky.stick {
  position: fixed;
  top: 0;
  z-index: 10000;
  border-radius: 0 0 0.5em 0.5em;
}

or By default div come one below one , So please try this

    #sticky{
        margin-left:auto;
        margin-right:auto;
        height:auto; 
        width:auto;
    }
    #inner1{
      float:left; 
    }
    #inner2{
      float:left; 
      clear: left;
    }
    </style>

    HTML:

    <div id="sticky">
        <div id="inner1">inner1</div>
        <div id="inner2">inner2</div>
    </div>