Javascript - upset offset position when scrolling

Question

I'm trying to create a sticky table header, I'm trying to capture the position of an element when the page scrolls

In the example the console just outputs the first values and doesn'y upset.

How do I upset of the offset when scrolling.

var blockPos = document.getElementById('block').offsetTop

window.addEventListener('scroll', function () {
  //var blockPos = document.getElementById('block').offsetTop
  console.log(blockPos)
});

html, body{
  background: grey;
  height: 100%;
}

.page{
  background: white;
  margin: 0 auto;
  max-width: 1200px;
}

.content{
  margin: 0 auto;
  width: 90%;
}

.text{
  
}

#block{
  background: red;
  height: 100px;
  width: 100px;
}

<div class="page">
  
  <div class="content">
    <div class="text">
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
      
      <div id="block"></div>
      
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
      
    </div>
    
  </div>
  
</div>

Answer 1

If you want a sticky header, I have 2 solutions for you. Check out the snippet, live demo.

1. CSS method - display: fixed

very easy way by setting display: fixed, but not working under IE 8 or below.

2. JS method

1. listen to scroll event, caculating the scroll top value while scrolling
2. display: absolute, and update the value of top while scrolling.

    var element = document.body;
    var computedFixedElement = document.getElementById('pos-abs');

    // record the original Y for `body`
    var y = element.getBoundingClientRect().y;

    window.addEventListener('scroll', function () {
      var bodyScrollTop = - element.getBoundingClientRect().top;

      computedFixedElement.style.top = bodyScrollTop + y + 'px';
    });

html, body{
  background: grey;
  margin: 0;
  /* height: 100%;
  overflow: scroll; */
}

.pos-fixed{
  background: red;
  width: 50%;
  height: 30px;
  position: fixed;
  top: 0;
  left: 0;
}

.pos-abs {
  background: blue;
  width: 50%;
  height: 30px;
  position: absolute;
  right: 0;
  top: 0;
}

.page{
  background: white;
  margin: 0 auto;
  max-width: 1200px;
}

.content{
  margin: 0 auto;
  width: 90%;
}

.text{
  
}

#block{
  background: red;
  height: 100px;
  width: 100px;
}

<div class="page" id="page">

    <div class="pos-fixed">
      using position: fixed
    </div>

    <div id="pos-abs" class="pos-abs">
      using position: absolute
    </div>

    <div class="content">
      <div class="text">
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
          ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
          ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
          ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
          ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
          ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
          ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
          ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
          ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
          ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
          ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>

        <div id="block"></div>

        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
          ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
          ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
          ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
          ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>

      </div>

    </div>

  </div>

Answer 2

function update(){
    var blockPos = document.getElementById('block').offsetTop;
     console.log(blockPos)
    }

    window.addEventListener('scroll', function () {
      update();
    });

Try this code