javascript - 将两个栏组合成一个顶部栏更改高度的粘性标题

Question

我有两个栏，一个顶部栏和一个面包屑栏。当两个条形图未组合时，顶部条形图更高。在某些时候，条形图组合成一个粘性标题。以下片段展示了这个概念。

$(() => {
  const pivot = 500 - 145;
  $(window).on('scroll', () => {
    const scrollTop = $(window).scrollTop();
    $('body').toggleClass('after-pivot', scrollTop > pivot);
  });
});

.bar {
  width: 100%;
  display: block;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
}

.bar:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.bar.top {
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  margin-top: 85px;
  background: rgba(1, 1, 1, 0.1);
}

.after-pivot .bar.top {
  background: black;
  margin-top: 0;
}

.bar.breadcrumbs {
  background: red;
  height: 40px;
}

.after-pivot .bar.breadcrumbs {
  position: fixed;
  top: 60px;
}

.bar>* {
  vertical-align: middle;
}

.button {
  height: 20px;
  text-decoration: none;
  color: white;
  background: grey;
  padding: 4px 10px;
}

.image {
  height: 500px;
  background: url("http://placehold.it/2000x500");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

body {
  height: 500vh;
  padding: 0;
  margin: 0;
}

p {
  margin: 5px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top bar">
  <a href="#" class="button">I am a button</a>
</div>
<div class="image">
</div>
<div class="breadcrumbs bar">
  <span>Home</span> - <span>My weird page</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lacus augue, fermentum sed dui vel, imperdiet pretium risus. Nam quis diam eu tortor efficitur molestie. Nulla non nibh felis. Proin eget malesuada urna, sed bibendum ex. Mauris lacinia
  ligula in ipsum ornare pulvinar. Pellentesque vitae volutpat nibh, in convallis velit. Aenean sed ex massa. Vestibulum ullamcorper purus et erat dignissim tristique. Pellentesque et viverra nisi.</p>

但是，由于顶栏在未与底栏组合时高度不同，因此底栏会“卡入”到位。如果我将轴心点更改为底部条正确移动的位置，它将越过看起来更糟糕的顶部条。

$(() => {
  const pivot = 500 - 60;
  $(window).on('scroll', () => {
    const scrollTop = $(window).scrollTop();
    $('body').toggleClass('after-pivot', scrollTop > pivot);
  });
});

.bar {
  width: 100%;
  display: block;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
}

.bar:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.bar.top {
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  margin-top: 85px;
  background: rgba(1, 1, 1, 0.1);
}

.after-pivot .bar.top {
  background: black;
  margin-top: 0;
}

.bar.breadcrumbs {
  background: red;
  height: 40px;
}

.after-pivot .bar.breadcrumbs {
  position: fixed;
  top: 60px;
}

.bar>* {
  vertical-align: middle;
}

.button {
  height: 20px;
  text-decoration: none;
  color: white;
  background: grey;
  padding: 4px 10px;
}

.image {
  height: 500px;
  background: url("http://placehold.it/2000x500");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

body {
  height: 500vh;
  padding: 0;
  margin: 0;
}

p {
  margin: 5px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top bar">
  <a href="#" class="button">I am a button</a>
</div>
<div class="image">
</div>
<div class="breadcrumbs bar">
  <span>Home</span> - <span>My weird page</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lacus augue, fermentum sed dui vel, imperdiet pretium risus. Nam quis diam eu tortor efficitur molestie. Nulla non nibh felis. Proin eget malesuada urna, sed bibendum ex. Mauris lacinia
  ligula in ipsum ornare pulvinar. Pellentesque vitae volutpat nibh, in convallis velit. Aenean sed ex massa. Vestibulum ullamcorper purus et erat dignissim tristique. Pellentesque et viverra nisi.</p>

---

我要实现的是，当底部栏到达顶部栏时，顶部栏上的 margin-top 逐渐减小，直到两个栏都在最顶部。

通过定义两个枢轴点并基于此计算 margin-top，我可以使用 javascript 轻松完成此操作。在查看响应式网站时，这会很快变得困惑，因为我需要将样式移动到 javascript 中。

function clamp(min, val, max) {
  return Math.max(min, Math.min(val, max));
}

$(() => {
  const pivotLower = 500 - 60;
  const pivotHigher = 500 - 145;
  $(window).on('scroll', () => {
    const scrollTop = $(window).scrollTop();
    $('.top.bar').css('margin-top', clamp(0, pivotLower - scrollTop, 85));
    $('body').toggleClass('after-pivot', scrollTop > pivotLower);
  });
});

.bar {
  width: 100%;
  display: block;
  -webkit-transition: background .25s ease;
  transition: background .25s ease;
}

.bar:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.bar.top {
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  margin-top: 85px;
  background: rgba(1, 1, 1, 0.1);
}

.after-pivot .bar.top {
  background: black;
  margin-top: 0;
}

.bar.breadcrumbs {
  background: red;
  height: 40px;
}

.after-pivot .bar.breadcrumbs {
  position: fixed;
  top: 60px;
}

.bar>* {
  vertical-align: middle;
}

.button {
  height: 20px;
  text-decoration: none;
  color: white;
  background: grey;
  padding: 4px 10px;
}

.image {
  height: 500px;
  background: url("http://placehold.it/2000x500");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

body {
  height: 500vh;
  padding: 0;
  margin: 0;
}

p {
  margin: 5px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top bar">
  <a href="#" class="button">I am a button</a>
</div>
<div class="image">
</div>
<div class="breadcrumbs bar">
  <span>Home</span> - <span>My weird page</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lacus augue, fermentum sed dui vel, imperdiet pretium risus. Nam quis diam eu tortor efficitur molestie. Nulla non nibh felis. Proin eget malesuada urna, sed bibendum ex. Mauris lacinia
  ligula in ipsum ornare pulvinar. Pellentesque vitae volutpat nibh, in convallis velit. Aenean sed ex massa. Vestibulum ullamcorper purus et erat dignissim tristique. Pellentesque et viverra nisi.</p>

代替 margin-top 我可以使用具有高度的真实或伪元素并改变它的高度。我们有 min-height 和 max-height，这意味着如果我们能够以某种方式强制将某些元素向下推，从而增加该元素的高度，我们将能够使这种过渡流畅。但是，我无法在 position: fixed 的 div 和正常流程中的元素之间找到任何此类交互。

---

是否可以使用纯 CSS 和 html 结构，加上一些设置一两个类的 javascript，根据滚动高度逐渐改变文档顶部和顶部栏之间的边距？

Codepen to mess with如果你愿意的话。

Answer 1

absolute怎么样？在CSS中定位，添加一个.before-pivot类fixed通过 JS ready只要scrollTop < pivot ？在此之后，在那短时间内，.top.bar将具有绝对定位，直到它到达顶部，此时 .after-pivot类将被添加。仍然需要 secondPivot point 才能起作用，但在这种情况下，不需要逐渐减少 margin 。

基本上，.top.bar 的类从 .before-pivot 过渡什么都没有 .after-pivot .

$(() => {
  const pivot = 500 - 145;
  const secondPivot = 500 - 60;
  $(window).on('scroll', () => {
    const scrollTop = $(window).scrollTop();
    $('body').toggleClass('before-pivot', scrollTop < pivot);
    $('body').toggleClass('after-pivot', scrollTop > secondPivot);
  });
  $(window).scroll();
});

.bar {
  width: 100%;
  display: block;
  -webkit-transition: background .25s ease;
  transition: background .25s ease;
}
.bar:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.bar.top {
  height: 60px;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: calc(440px);
  background: rgba(1, 1, 1, 0.1);
}
.before-pivot .bar.top {
  position: fixed;
  margin-top: 85px;
}
.after-pivot .bar.top {
  background: #000;
  position: fixed;
  margin-top: 0;
}
.bar.breadcrumbs {
  background: red;
  height: 40px;
}
.after-pivot .bar.breadcrumbs {
  position: fixed;
  top: 60px;
}
.bar > * {
  vertical-align: middle;
}

.button {
  height: 20px;
  text-decoration: none;
  color: white;
  background: grey;
  padding: 4px 10px;
}

.image {
  height: 500px;
  background: url("http://placehold.it/2000x500");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

body {
  height: 500vh;
  padding: 0; margin: 0;
}

p {
  margin: 5px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top bar">
  <a href="#" class="button">I am a button</a>
</div>
<div class="image">
</div>
<div class="breadcrumbs bar">
  <span>Home</span> - <span>My weird page</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lacus augue, fermentum sed dui vel, imperdiet pretium risus. Nam quis diam eu tortor efficitur molestie. Nulla non nibh felis. Proin eget malesuada urna, sed bibendum ex. Mauris lacinia ligula in ipsum ornare pulvinar. Pellentesque vitae volutpat nibh, in convallis velit. Aenean sed ex massa. Vestibulum ullamcorper purus et erat dignissim tristique. Pellentesque et viverra nisi.</p>

<p>Aliquam vel tempor urna. Ut consectetur, augue non consectetur auctor, quam est blandit dui, quis accumsan sem tortor id nunc. Cras mollis posuere lacus, ultricies placerat metus. Phasellus convallis erat ac nulla semper sollicitudin. Vestibulum lacinia arcu ut efficitur iaculis. Duis in erat vitae mi maximus hendrerit. Mauris ut felis id est pretium porta sit amet eget nunc. Proin posuere fringilla suscipit. Proin eu porttitor magna. Duis convallis rhoncus nisi, sit amet tincidunt turpis fermentum sit amet. Integer sit amet bibendum ligula. Vestibulum nunc felis, facilisis mollis ultrices sed, auctor ut nibh. Nullam suscipit nibh sed tellus commodo, in laoreet dui posuere. Aliquam pulvinar arcu sem, in bibendum augue dapibus at. Quisque mattis, lectus ut ornare dictum, odio urna pretium nibh, at consectetur ipsum magna nec turpis. Cras vel risus eros.</p>

<p>Nunc ante mi, placerat id odio vel, tristique faucibus tortor. Morbi et neque ac velit tincidunt condimentum. Nunc id neque condimentum, pulvinar enim tincidunt, cursus turpis. Sed tempus a ligula accumsan lobortis. Donec consequat dui mauris, vitae hendrerit enim hendrerit sed. Quisque nisl lorem, varius in eros eget, ullamcorper rhoncus sem. Mauris euismod diam eu imperdiet interdum.</p>

<p>Aenean a diam vestibulum, eleifend erat ac, porta magna. In mattis lorem ac libero suscipit luctus a quis tortor. Curabitur quam urna, porta vel faucibus bibendum, efficitur molestie orci. Vivamus ultricies urna dui, ullamcorper aliquam dui semper maximus. Praesent posuere enim massa, eu scelerisque enim tincidunt at. Pellentesque vitae rutrum metus. Nam ac blandit lorem. Sed posuere ornare dui, non imperdiet urna posuere a. Nullam consectetur mi sit amet ornare pulvinar. Nunc laoreet blandit dolor, non elementum purus porta ac. Vestibulum quis auctor quam. Maecenas mi est, ultrices in elit sit amet, congue sodales nunc. Suspendisse eget tristique nulla. Vestibulum vulputate lacus eu nibh porta, ut condimentum diam tristique.</p>

<p>Suspendisse convallis sem dolor, vel congue urna molestie quis. Praesent eros felis, aliquet quis mattis vel, tincidunt vel purus. Pellentesque sollicitudin lorem eu sapien porttitor posuere eget a lacus. In sagittis tincidunt sodales. Cras iaculis velit id elit facilisis lobortis. Maecenas id aliquet elit. Aliquam pretium quam at urna tempus dictum. Cras ornare tellus dolor, ac finibus turpis consectetur ac. Curabitur eget vulputate urna, sed finibus nisi. Quisque molestie, tortor sed sagittis pharetra, dui est suscipit odio, vel venenatis quam sapien vel felis.</p>