Question

我有一个元素，直到某个div结束，我只想成为position: fixed。我能够以某种方式进行工作，但仍然无法100％顺利地完成定位工作，所以也许您可以帮我忙吗？

    $(window).on("scroll", function() {
      var scrollTop = $(this).scrollTop();

      var containerOffset = $(".content").offset().top;
      var containerHeight = $(".content").height();
      var f1 = parseInt(containerHeight);
      var f2 = parseInt(containerOffset);
      var sum = f1 + f2;

        if (scrollTop > sum - 240) {
          $(".item")
            .css("position", "relative")
            .css("top", f1 + "px")
        }  else {
          $(".item")
            .css("position", "fixed")
            .css("top", "20px");
        }

    });

.content {
  height: 1000px;
  border: 1px solid red;
  background: grey;
}

.item {
  position: fixed;
  top: 20px;
  height: 40px;
  background: #fff;
  width: 100%;
}

.another {
  background: orange; 
  height: 400px;
}

.more {
  background: darkblue;
  height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  
  <div class="content">
    <div class="item">
      scroll only until end of grey CONTENT DIV
    </div>
  </div>
  <div class="another">
    <h1>Another div</h1>
  </div>
  <div class="more">
    <h1>More content</h1>
  </div>

</div>

Answer 1

您可以通过调整

来调整它何时开始滚动

if (scrollTop > sum - 240) {

目前尚不清楚240来自何处，但可以将其与您的.item top属性进行匹配

if (scrollTop > sum - 20) {

它给出您想要的（看起来）

    $(window).on("scroll", function() {
      var scrollTop = $(this).scrollTop();

      var containerOffset = $(".content").offset().top;
      var containerHeight = $(".content").height();
      var f1 = parseInt(containerHeight);
      var f2 = parseInt(containerOffset);
      var sum = f1 + f2;

        if (scrollTop > sum - 20) {
          $(".item")
            .css("position", "relative")
            .css("top", f1 + "px")
        }  else {
          $(".item")
            .css("position", "fixed")
            .css("top", "20px");
        }

    });

.content {
  height: 1000px;
  border: 1px solid red;
  background: grey;
}

.item {
  position: fixed;
  top: 20px;
  height: 40px;
  background: #fff;
  width: 100%;
}

.another {
  background: orange; 
  height: 400px;
}

.more {
  background: darkblue;
  height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  
  <div class="content">
    <div class="item">
      scroll only until end of grey CONTENT DIV
    </div>
  </div>
  <div class="another">
    <h1>Another div</h1>
  </div>
  <div class="more">
    <h1>More content</h1>
  </div>

</div>

更新的小提琴：https://jsfiddle.net/pb0Ljtn4/20/

Answer 2

将此CSS添加到您的html

div.sticky_top {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 20px;
}

并将sticky_top类添加到您的项目div-无需使用JavaScript或jquery

<div class="item sticky_top">
    scroll only until end of grey CONTENT DIV
</div>

https://codepen.io/anon/pen/bxZaPd

jQuery如何定位：固定元素直到页面的某个div结束

2 个答案: