Question

我的站点主体中有两个div。我想在左侧的div中固定位置... 但是滚动到底部时，它会与我联系我们。..这是示例页面：http://www.runsensible.com/legal/privacypolicy 这是我的代码：

.sticky {
  position: fixed;
}

<div id="menu-privacy">
    <div class="fusion-text">
    <p>
        <a href="#info" class="_ps2id _mPS2id-h" data-ps2id-offset="">– What information we collect from you</a>
        <a href="#info-used" class="_ps2id _mPS2id-h" data-ps2id-offset="">– How your information is used</a>
        <a href="#info-shared" class="_ps2id _mPS2id-h" data-ps2id-offset="">– How your information is shared</a>
        <a href="#terms-services" class="_ps2id _mPS2id-h" data-ps2id-offset="">– Terms of service</a>
    </p>
    </div>
</div>

<script>
window.onscroll = function() {myFunction()};

var header = document.getElementById("menu-privacy").getElementsByClassName("fusion-text")[0];
var sticky = header.offsetTop;

function myFunction() {
    if (window.pageYOffset > sticky) {
        header.classList.add("sticky");
    } else {
        header.classList.remove("sticky");
    }
}
</script>

Answer 1

我建议您改用position：sticky，这样可以通过纯CSS而不是添加javascript来实现此效果。看着您的网站，这样做很有可能

这是您需要做的

删除添加/删除粘性类的javascript
使用id =“ menu-privacy”在您的div中添加此样式，类似这样

CSS

#menu-privacy {
   position: sticky;
   top: 80px;
}

请注意，您可以发挥最高价值来实现自己喜欢的差距。希望这会有所帮助！

Answer 2

1）为页脚提供一个ID或为页脚节添加包装器 2）让您的功能像这样-您需要根据页脚位置来设置条件

function myFunction() {
  if (sticky < footerIdOffset) {// footerIdOffset is an offset for footer section
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

3）您需要减去页脚和上半部分之间的边距/空白，才能使用您的点真。

祝你好运

Answer 3

您可以尝试将属性“ z-index”添加到联系人div。

Answer 4

关于“与我们联系” div设置（z-index：10）。

Answer 5

我建议不要使用JavaScript函数，而可以使用CSS类。注意：根据您的规范要求，您可以更改宽度和高度的大小。然后，您可以将其作为rewind放入包含class="fixed"的div标签中，如下所示。

id="menu-privacy"

滚动页面上的固定位置

5 个答案:

CSS