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>

Duplicated: https://stackoverflow.com/questions/18382496/sticky-header-after-scrolling-down — Angel Luis, Apr 14 '18 at 10:52

score 1 · Accepted Answer · answered Apr 14 '18 at 11:11

1

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

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

Try this code

answered Apr 14 '18 at 11:11

Azhar Zafar

1,554
1
10
13

This gives me the same result - just one value – ttmt Apr 14 '18 at 11:50

score 1 · Answer 2 · answered Apr 14 '18 at 11:37

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

listen to scroll event, caculating the scroll top value while scrolling
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>

Javascript - upset offset position when scrolling

2 Answers2

1. CSS method - display: fixed

2. JS method