如何防止内容在更改元素位置上从相对位置跳转到固定位置

Question

我想知道如何防止跳跃并使内容平滑过渡，我有一个元素可以改变它从相对位置到固定位置的位置。我做了一个小提琴here。我创建了3个元素：

<div id="top-bar">
  <p>
    Top bar
  </p>
</div>
<div id="header">
  <p>
    Header
  </p>
</div>
<div id="content">
  <p>
    Content
  </p>
</div>

当margin-top消失且height获得位置top-bar时，我尝试添加top-bar header fixed content元素，但没有帮助。如何在不跳过内容的情况下使其顺利进行？

Answer 1

您的解决方案的问题是因为您的保证金最高级别有40px的保证金而且您的标题高100px。您还可以更改边距以匹配标题高度。

请参阅https://jsfiddle.net/8q6rbzj7/35/

.margin-top {
  margin-top: 100px;
}

最好采用最简单的方法，只需使用与标题高度相同的包装来包装标题。

https://jsfiddle.net/8q6rbzj7/33/

<div class="header-container">
  <div id="header">
    <p>
      Header
    </p>
  </div>
</div>

CSS

.header-container {
  height: 100px;
}

JS被减少了，因为你不需要那个保证金最高的东西

window.addEventListener('scroll', function() {
  if (window.scrollY > headerTop) {
    header.classList.add('fixed');

  } else {
    header.classList.remove('fixed');

  }
});

Answer 2

您可以简单地将margin-top的值设为与标题（100px）的height相同的值，而不是顶栏 ，因为你必须添加你删除的内容。

＆＃13;

＆＃13;

const header = document.querySelector('#header');
const content = document.querySelector('#content');
const rect = header.getBoundingClientRect();
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const headerTop = rect.top + scrollTop;

window.addEventListener('scroll', function() {
  if (window.scrollY > headerTop) {
    header.classList.add('fixed');
    content.classList.add('margin-top');
  } else {
    header.classList.remove('fixed');
    content.classList.remove('margin-top');
  }
});

＆＃13;

body,html {
margin:0;
}

#top-bar {
  height: 40px;
  background: red;
}

#header {
  height: 100px;
  background: black;
  position: relative;
  top: 0;
  width: 100%;
}

#content {
  height: 900px;
  background: blue;
  padding-top: 150px;
}

.fixed {
  position: fixed!important;
}

.margin-top {
  margin-top: 100px;
}

p {
  color: white;
}

#top-bar p,#header p {
margin:0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top-bar">
  <p>
    Top bar
  </p>
</div>
<div id="header">
  <p>
    Header
  </p>
</div>
<div id="content">
  <p>
    Content
  </p>
  <p>
    Content
  </p>
  <p>
    Content
  </p>
  <p>
    Content
  </p>
  <p>
    Content
  </p>
  <p>
    Content
  </p>
  <p>
    Content
  </p>
  <p>
    Content
  </p>
  <p>
    Content
  </p>
  <p>
    Content
  </p>
  <p>
    Content
  </p>
  <p>
    Content
  </p>
  <p>
    Content
  </p>
  <p>
    Content
  </p>
  <p>
    Content
  </p>
  <p>
    Content
  </p>
</div>

＆＃13;

＆＃13;

＆＃13;