CODEWITHSUNDEEP
javascripthtmlcss
B-CHI
B-CHI

Reputation: 149

fixed position on scrolling page

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>

Upvotes: 1

Views: 123

Answers (5)

Arpana
Arpana

Reputation: 26

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

Upvotes: 1

Tan Jian Siang
Tan Jian Siang

Reputation: 1

On "Contact Us" div set (z-index:10) .

Upvotes: 0

XiaoGuaiShow
XiaoGuaiShow

Reputation: 1

You can try adding the attribute "z-index" to the contact div.

Upvotes: 0

Anees Hikmat Abu Hmiad
Anees Hikmat Abu Hmiad

Reputation: 3550

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

Upvotes: 1

Erwin Sanders
Erwin Sanders

Reputation: 306

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!

Upvotes: 0

Related Questions