Skip to Content (Press Enter)
2020-09-11 09-16-02
Apisara P.
33Views
1Comments
Why is the scrollTop value 0?
Question
JavaScript
Reactive
JQuery
OutSystems 11

I want to change the style class of the header from style1 to style2 when scrolling down, but when I check it on browser,  the scrollTop value is 0 and nothing changed. 

This is the script:


Does anyone know the answer to this question?  Thank you in advance!

0
0
27 Dec 2023
Copy Link
2021-03-18 21-03-15
Benjith Sam
 
MVP

Hi,

Make a minor adjustment to your JS code by referencing the 'screen-container' element scrollTop value instead of the document body scrollTop, as highlighted below.

JS Snippet:

let topHeader = document.getElementById($parameters.Id);

document.getElementsByClassName("screen-container")[0].addEventListener("scroll", function () {
    if(this.scrollTop > 50) {
        topHeader.classList.add('style2');
        topHeader.classList.remove('style1');
    } else {
        topHeader.classList.remove("style2");
      topHeader.classList.add("style1");
    }
  });

I hope this helps you!


Kind regards,

Benjith Sam

0
0
27 Dec 2023
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.