将两个条形组合成一个粘贴标题，其中顶部条形更改高度

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点，但在这种情况下，不需要逐渐减少保证金。

基本上，.top.bar的类从.before-pivot过渡到无.after-pivot。

＆＃13;

＆＃13;

$(() => {
  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();
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;