Question

我正在尝试创建一个粘性表头，我试图在页面滚动时捕获元素的位置

在示例中，控制台只输出第一个值并且不会让人不高兴。

滚动时如何扰乱偏移。

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

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

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

试试此代码

Answer 2

如果你想要一个粘性标题，我有两个解决方案。查看片段，现场演示。

1。 CSS方法 - 显示：固定

设置display: fixed非常简单，但不能在IE 8或更低版本下工作。

2。 JS方法

听取scroll事件，在滚动时计算滚动顶部值
display: absolute，并在滚动时更新top的值。

    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 - 滚动时镦粗偏移位置

2 个答案:

1。 CSS方法 - 显示：固定

2。 JS方法