如何将数据可见范围更改为%%

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的值。您可以将这些触发器适当地放置在每个网站的区段之上，这样，无论屏幕大小如何，标题都应该在正确的时间更新。这是一个代码库。

编辑

尝试这个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);