Question

对于我当前的项目，我想在我的DOM中创建一种固定元素。我没有使用position: fixed，因为元素将失去它在DOM中的存在，从而失去其原始位置（在我看来，这只会让事情变得更糟）。每当用户滚动并且我在JavaScript中使用的代码成为可能时，我通过向可滚动元素添加/删除margin-top: somevalue使元素表现得像固定元素。使用此方法还可以为整个“交互”添加漂亮的动画。

我遇到的问题是，当（浏览器）窗口具有如此小的高度，该元素将到达页脚时，它将扩展容器，正文或其上的任何父级。我该如何防止这种情况发生？

我在这个问题的每个例子中都提出了JSFiddle。

$(document).ready(function() {
  var topPadding = 10;
  //Set the scrollable offset before starting the scroll
  var scrollableTopOffset = $(".scrollable").offset().top;

  $(window).scroll(function() {
    /* When scrolling, determine wether the browser window still contains
		scrollable: */
    if (scrollableTopOffset < $(window).scrollTop()) {
      //Code when scrollable is within the browser window...
      //$(".shopping-cart").addClass("scrollable-fixed");
      $(".scrollable").stop().animate({
        marginTop: $(window).scrollTop() - scrollableTopOffset + topPadding
      });
    } else {
      //Code when scrollable is not within the browser window...
      //$(".shopping-cart").removeClass("scrollable-fixed");
      $(".scrollable").stop().animate({
        marginTop: 0
      });
    }
  });
});

.some-content-block {
  height: 150px;
  margin-bottom: 5px;
  background-color: red;
}
.scrollable {
  height: 75px;
  background-color: cyan;
}
footer {
  height: 200px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="background-color: blue;">
  <div class="row">
    <div class="col-md-12">
      <div class="some-content-block">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-10 col-sm-10 col-md-10">
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2">
      <div class="scrollable">
      </div>
    </div>
  </div>
</div>
<footer></footer>

编辑：这是我的小提琴，更新了SamGhatak的回答：JSFiddle

Answer 1

我想我在这里找到了解决方案：

https://jsfiddle.net/rv4mg8uq/2/

在那里添加了这段代码：

if(($('footer').offset().top -scrollableTopOffset +topPadding)<$(window).scrollTop()){
        //do nothing
}

如何使用以下代码停止“修复”元素？

1 个答案: