滚动页面上的固定位置

Question

I have two div in site body.I want to have fixed position to the left div... but when scrolling to bottom it comes on my contact us div..this is the sample page: http://www.runsensible.com/legal/privacypolicy here is my code:

.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

I suggest you use position:sticky instead so this effect can be achieved with pure CSS rather than adding javascript. Looking at your site it's rather possible to do this

Here's what you need to do

1. Remove the javascript that add/remove the sticky class
2. Add this style in your div with id="menu-privacy", something like this

CSS

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

note that you can play around the top value to achieve the gap that you like. Hope this helps!

Answer 2

1) give an id to footer or add a wrapper for footer section 2) let your function like this - you need to let condition by footer position

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

3) you need to subtract margin/gabs between footer and upper section to work in your point truth.

Good luck

Answer 3

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

Answer 4

在“与我们联系” div设置（z-index：10）上​​。

Answer 5

What I suggest is instead of having a JavaScript function, we can use a CSS class for it. NOTE: Based on the requirements of your specification, you can vary the size of width & height. And you can put this as class="fixed" for the div tag containing id="menu-privacy" as you can see below.

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