如何仅在基于百分比而非像素查看页面的特定部分时才显示元素中的文本？

Question

目的

在标题中我希望我的＆＃34;标语中的文字＆＃34;登陆页面时不显示。但是当你滚动到某一点时，它就会显示出来。

背景

当我查找类似的问题时，他们建议使用javascript。它们基于滚动一定数量的像素。

但是我在第一个元素上的背景的封面宽度和高度都是100％所以我需要能够只在有人在页面的第二部分时显示文本。

代码

CodePen上的演示

HTML

<header>
  Company

  <span class="tagline">
    We are the best
  </span>
</header>

Answer 1

最初，您希望将范围的display设置为none。

接下来，为scroll事件添加事件侦听器，并从顶部跟踪滚动位置。我们可以使用document.body.scrollTop来完成此操作。

如果它高于指定金额，我们会将display属性设置为block，如果低于hidden，我们会将显示设置为var span = document.getElementsByClassName("tagLine")[0]; span.style.display = "none"; document.addEventListener("scroll", function() { if (document.body.scrollTop > 300) { span.style.display = "block"; } else { span.style.display = "hidden"; } }); 。

floor(row_id/divisor)

这是一个小提琴示例

http://jsfiddle.net/8drp9o7n/2

Answer 2

据我所知，你有一个高度为100％的块，你只想在块滚出视图时显示一些东西。

我就是这样做的。

var elem = document.querySelector('.tagline');
elem.style.visibility = "hidden";

window.onscroll  = function( e ) {
    var scrollPercentage = window.scrollY / window.innerHeight;
    elem.style.visibility = (scrollPercentage>1) ? "visible" : "hidden";
};

编辑：我对代码做了一些修改，这里是codepen

Answer 3

与其他一些答案相比，这可能是过度杀伤，但这是你的武器库中的一个很好的选择。有一个名为Waypoints的Javascript库非常适合处理这类事情。

http://imakewebthings.com/waypoints/

一旦您将库安装到您的页面上并假设您正在使用jQuery，并假设您的.tagline是隐藏的，请使用此代码（引用您的Codepen演示）：

var waypoints = $('#main').waypoint({
    handler: function() {
        $('.tagline').show();
    }
});

这个想法是，当用户滚动到#main设置的Waypoint时，处理程序将触发。如果用户向上或向下滚动，甚至可以选择执行不同的操作，并创建偏移（例如，在页面中间触发）。

这可以让你到达你需要去的地方。