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

How to make text in an element appear only when viewing a specific part of the page based on percentage not pixels?

本文关键字：像素 显示 分时 定部 百分比 文本 元素 何使      更新时间：2023-09-26

目标

在标题中，我希望文本在我的"；标语"；以在登录页面时不显示。但当你滚动到某一点时，它就会显示出来。

背景

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

然而，我在第一个元素上的背景具有100%的封面宽度和高度，因此我需要能够仅在有人在页面的第二部分时显示文本。

代码

CodePen 演示

HTML

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

最初，您希望将跨度的display设置为none。

接下来，为scroll事件添加一个事件侦听器，并从顶部跟踪滚动位置。我们可以通过使用document.body.scrollTop来做到这一点。

如果它高于指定的数量，我们将display属性设置为block，如果它较低，我们将display设置为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";
    }
});

这是一个小提琴的例子

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

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

http://imakewebthings.com/waypoints/

一旦你把库安装到你的页面上，假设你使用的是jQuery，假设你的.tagline一开始是隐藏的，使用以下代码（参考你的Codepen演示）：

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

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

这应该能把你带到你需要去的地方。

据我所知，您有一个高度为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";
};

编辑：我对代码进行了一些修改，这是代码笔

相关文章：