CODEWITHSUNDEEP
javascript
Peter Boomsma
Peter Boomsma

Reputation: 9836

How to get scrollTop from within element?

I have a div element that has some other elements such as a p tag and a menu. I want the menu to add a class to the menu when to user scrolls about 100 pixels down. So I'm trying to figure out how to get the distance that's scrolled.

<script type="text/javascript">
  var x = document.getElementById("scrollElement");

  function myFunction() {
    alert(x.scrollTop);
  }
</script>

I've created a plunkr to simulate the situation. The problem is that when I scroll and I check the scrollTop value it outputs 0.

This is the plunkr

Why the downvote? This is a normal javascript question and it has an clear example of what the issue is :/

Upvotes: 0

Views: 136

Answers (2)

fingeron
fingeron

Reputation: 1182

Element.scrollTop is essentially the distance between the DIV's top border and the DIV's top most visible line. For better understanding read this.

var container = document.querySelector(".container"),
    p         = document.querySelector("p.child");
    
container.addEventListener('scroll', function() {
  if(container.scrollTop > 100)
    p.classList.add('red');
  else
    p.classList.remove('red');
});
.container {
  max-height: 200px;
  border: 1px solid black;
  overflow-y: auto;
}

h1.child {
  text-align: center;
  height: 400px;
}

p.child.red {
  color: red;
}
<div class="container">
  <h1 class="child">HELLO!</h1>
  <p class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Upvotes: 1

xianshenglu
xianshenglu

Reputation: 5369

try this

// Code goes here

window.addEventListener('scroll',function(){
  let scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
     if(scrollTop>100){alert(scrollTop)}
},false);

Upvotes: 1

Related Questions