html - 如何将数据可见范围更改为 % 百分比

Question

我将它用于我的页眉，该页眉在一页上下滚动页面中发生变化。我注意到它没有响应，所以我想问你是否知道一种使它响应的方法。就像将 0-690 更改为百分比，以便它可以在移动设备和电视屏幕上使用。

HTML

 <div class="header header-1" data-visible-range="0-690">Portfolio</div>
 <div class="header header-2" data-visible-range="691-2100">Services</div>
 <div class="header header-3" data-visible-range="2101-">Contact</div>

CSS

.header-1 {
    background-color:dimgray;
    display: block;

}

.header-2 {
    background-color:dimgray;
}

.header-3 {
    background-color:dimgray;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    height:8vmax;
    width: 100%;
    display: none;
    visibility:hidden;
    transition: visibility .4s, opacity .4s ease-in-out;opacity:0;
    font-size:4vmax;padding:1.58vmax;color:white;
}

Answer 1

如果不是基于像素，而是检查元素是否到达页面顶部，然后更改页眉，会怎么样？

我们将这些元素称为“触发器”。有关它们如何工作的示例，请参阅下面的代码。

let updateHeader = () => {
  let scrollTop = $(window).scrollTop(),
    triggerTitle = "Hi";
  $('.trigger').each((i, el) => {
    let topPos = $(el).offset().top,
      distance = topPos - scrollTop;
    if (distance < 0)
      triggerTitle = $(el).data('title');
  });
  $('header h2').text(triggerTitle);
}

$(window).scroll(updateHeader);
$(window).on('touchmove', updateHeader);

body {
  margin: 0;
}

#container {
  height: 1000px;
}

header {
  width: 100%;
  position: fixed;
  top: 0;
  background-color: red;
}

p {
  margin: 200px 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <header><h2>Hi</h2></header>
  <p class="trigger" data-title="section1">
    trigger1
  </p>
  <p class="trigger" data-title="section2">
    trigger2
  </p>
  <p class="trigger" data-title="section3">
    trigger3
  </p>
</div>

当您向下滚动页面时，每个触发器都会到达页面顶部，标题中的文本将更改为最新触发器的 data-title 的值。您可以将这些触发器适本地放置在您网站的每个部分上方，这样，无论屏幕大小如何，标题都应该在正确的时间更新。 Here's a codepen .

编辑

尝试使用此 JS 以获得最大兼容性(不涉及 es6)。

function updateHeader() {
  var scrollTop = $(window).scrollTop(),
    triggerTitle = "Hi";
  $('.trigger').each(function(i, el) {
    var topPos = $(el).offset().top,
      distance = topPos - scrollTop;
    if (distance < 0)
      triggerTitle = $(el).data('title');
  });
  $('header h2').text(triggerTitle);
}

$(window).scroll(updateHeader);
$(window).on('touchmove', updateHeader);