滾動頁面上的固定位置

Question

我的網站正文中有兩個div。我想在左側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來實現此效果。 查看您的網站，這樣做很有可能

這就是你需要做的

1. 刪除添加/刪除粘性類的JavaScript
2. 使用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類。 注意：根據規格要求，您可以更改寬度和高度的大小。 您可以將它作為包含id="menu-privacy"的div標簽的class="fixed"放置，如下所示。

   .fixed{ 
     position: fixed;
     top: 80px;
     right: 0px;
     width: 100px;
     height: 150px;
     }