Question

我需要停止一个div，它在触摸另一个元素之前在滚动上获得一个固定位置，基本上让它回到某个位置的绝对位置，这应该适用于任何大小的屏幕。我有一个jsfiddle代码，有两个元素，如果你知道答案，请看示例和帮助！

var navTop = $('#nav').offset().top;
var lastMode = "absolute";

$(window).scroll(function(){
var mode;
if ($(this).scrollTop() >= navTop) {
    mode = 'fixed';
} else {
    mode = 'absolute';
}

if(lastMode !== mode) {
    if (mode == 'fixed') {
        $('#nav').css('position', 'fixed');
        $('#nav').css('top', '0');
    } else {
        $('#nav').css('position', 'absolute');
        $('#nav').css('top', navTop);
    }
    lastMode = mode;
}
});

https://jsfiddle.net/Zygimantas10/vro3LLu9/

如果不清楚，请告诉我。

Answer 1

喜欢这个吗？

var navTop = $('#nav').offset().top;
var navStop = $('#stop').offset().top;
var lastMode = "absolute";

$(window).scroll(function() {
  var mode;
  if ($(this).scrollTop() >= navTop) {
    if ($(this).scrollTop() - navStop + $('#nav').height() > 0)
      mode = 'absolute';
    else
      mode = 'fixed';
  } else {
    mode = 'absolute';
  }

  if (lastMode !== mode) {
    if (mode == 'fixed') {
      $('#nav').css('position', 'fixed');
      $('#nav').css('top', '0');
    } else {
      $('#nav').css('position', 'absolute');
      $('#nav').css('top', navTop);
    }
    lastMode = mode;
  }
});

#nav {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 200px;
  width: 100px;
  height: 50px;
}

#stop {
  width: 100%;
  background: blue;
  height: 300px;
  position: absolute;
  top: 900px;
  margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body style="height:5000px;">
  <div id="nav"></div>
  <div id="stop"></div>
</body>

在某个div或某个位置停止固定位置

1 个答案: