How to change My div position on page-load and on page scroll

Question

I have a top bar div under an element I am trying to show when page reload it has top:50px and when user scroll page the position change to top:175px as I have stick header too, but it is not working as expected.

it is behaving like this on page load -

and it has to look like this on page load -

  window.onscroll = function () { scrollFunction() };

    function scrollFunction() {
       if (!document.body.scrollTop > 1 || document.documentElement.scrollTop > 1 ) {
           document.getElementById("bar").style.top = "90px";
      }else{
           document.getElementById("bar").style.top = "175px";
      }
    }

score 1 · Accepted Answer · answered Jun 04 '22 at 04:32

1

First of all, your if statement is always true because I believe, document.body.scrollTop is always 0 (Correct me if I'm wrong) document.body.scrollTop Firefox returns 0 : ONLY JS. Just use document.documentElement.scrollTop alone:

if (!document.documentElement.scrollTop) {
   // Page load
   document.getElementById("bar").style.top = "90px";
}else{
   // user scrolled
   document.getElementById("bar").style.top = "175px";
}

Second of all, I'm wondering why do you want your bar lower when user scrolled than when the page first loaded? If you want your bar to always be on the page under your header, I suggest you should use css position: sticky; top: *your header height in px*

answered Jun 04 '22 at 04:32

Layhout

1,445
1
3
16

I just added `position: fixed;` `sticky` not working – kate moss Jun 04 '22 at 07:29
What if we need to hide this top-bar at style.top <=5540 or we need to hide this after particular div? – kate moss Jun 06 '22 at 06:17
Have you try `position: -webkit-sticky`? Maybe your browser's having with `position: sticky`. – Layhout Jun 07 '22 at 03:42

How to change My div position on page-load and on page scroll

1 Answers1