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

如果您只是检查一个元素是否位于页面顶部，然后更改了标题，而不是基于像素，那该怎么办？

我们将这些元素称为“触发器”。＆＃34;请参阅下面的代码，了解它们的工作原理。

＆＃13;

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

＆＃13;

body {
  margin: 0;
}

#container {
  height: 1000px;
}

header {
  width: 100%;
  position: fixed;
  top: 0;
  background-color: red;
}

p {
  margin: 200px 10px;
}

＆＃13;

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

＆＃13;

当您向下滚动页面时，每个触发器都会触及页面顶部，标题中的文本将更改为最新触发器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);

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

1 个答案: