Question

该问题已在论坛上讨论过几次，但是由于无法解决，因此寻求帮助。

我在WP网站上有一个侧面联系人菜单（作为小部件），并将其设置为位置：已修复，因此滚动时它不会更改位置。但是，我希望它在到达footer div之前停止修复，因为它看起来很奇怪。

据我所读，我需要jquery和一个可以在某个时候将固定位置更改为相对位置的脚本，所以我觉得我了解它的基本原理，甚至找到了几个脚本，但是所有这些都无法使用全部。

我想要一些与这里完全一样的东西： Stop fixed position at certain div or certain position

我创建了3个文件：html，css，js，并从答案中放入了所有代码，但这根本不起作用。

我的js文件-java.js

jQuery(document).ready(function() {

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;
  }
});

}

我的css文件-style.css：

#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;
}

我的html文档-index.html

<link rel="stylesheet" type="text/css" href="style.css">
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="javascript" src="java.js"></script>
<body style="height:5000px;">
  <div id="nav"></div>
  <div id="stop"></div>
</body>

由于上面的代码只是另一个主题的答案-我想根据自己的需要进行更改，但似乎我做错了事，因为它不起作用。

详细说明：我希望侧面接触菜单<div class="widget-contact">像现在一样正常启动（位置固定），并在击中时停止固定 <div id="colophon-inside" class="footer-three">

我使用html / css很好，但是我不了解js，我觉得我的问题很容易解决。

你能帮忙吗？

Answer 1

https://jsfiddle.net/42muhgj3/1/

$(window).scroll(function() {
  const pos = Math.max(5, 200 - $(this).scrollTop());
  // maximum 200, minimum 5, according to scrollTop
  $('#nav').css('top', pos + 'px');
  console.log(pos);
});

css

#nav {
  background: rgba(0, 0, 0, 0.5);
  position: sticky;
  top: 200px;
  width: 100px;
  height: 50px;
}

Answer 2

您的代码有效。您只是错过了javascript文件末尾的“）”。因此，完成您的JS文件应该是：

jQuery(document).ready(function() {

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;
  }
});

})

在这里我说这是“已解决”

停止位置：将div固定在特定点（在页脚开始之前）

2 个答案: