Question

我的页面上有一些嵌套的DIV。在内容区域内，我有一行定义，有两个DIV（左DIV是3列，右DIV是9列）。当我滚动时，我希望左侧DIV在页面顶部是粘性的。我的代码正在运行，但是当我的div粘贴到浏览器的顶部时，由于某种原因，DIV会改变宽度。我无法解释原因。

CSS
@media only screen and (min-width: 40.063em) {
  .my-sticky-element.stuck {
    position: fixed;
    top: 5px;
  }
}

JS
var stickyElement = $('.my-sticky-element');
var vTop = stickyElement.offset().top - parseFloat(stickyElement.css('margin-top').replace(/auto/, 0));
$(window).scroll(function (event) {
  var y = $(this).scrollTop();
  if (y >= vTop) {
    stickyElement.addClass('stuck');
  } else {
    stickyElement.removeClass('stuck');
  }
});

HTML
<div class="row">
  <div class="medium-3 columns">
    <div class="my-sticky-element">
      <div class="box-body radius bg-white clearfix">
        <div class=" filter" style="padding-bottom: .5rem;">
          <i class="fa fa-filter fa-2x text-black"></i>
          <input id="contactFilter" type="search" placeholder="Filter by Contact Name" style="margin-bottom: .5rem;" />
          <a href="#" class="right selectAllContacts"><i class="fa fa-square-o fa-2x"></i></a>
        </div>
      </div>
    </div>
  </div>
  <div class="medium-9 columns">
    <div class="box-body no-padding" style="">
      <!--- content -->
    </div>
  </div>
</div>

似乎.my-sticky-element.stuck导致div缩小宽度。我没有写完整的CSS，但是我观察到在DIV变粘之前它是position:relative并且在它被卡住之后它是position:fixed。

在基础5中修改父div时，防止div改变大小

0 个答案: