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

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

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

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

代码 演示

HTML

单位
我们是最好的

最初，您希望将span的

显示设置为
none

接下来，为
滚动
事件添加一个事件侦听器，并从顶部跟踪滚动位置。我们可以使用
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";
    }
});

这里有一个小提琴的例子

最初，您希望将span的
显示设置为
none

接下来，为
滚动
事件添加一个事件侦听器，并从顶部跟踪滚动位置。我们可以使用
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";
    }
});

这里有一个小提琴的例子

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

编辑：我对代码做了一些修改，以下是据我所知的
，您有一个高度为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";
};

编辑：我对代码做了一些修改，这是一个
与其他一些答案相比，这可能有些过分，但这是一个很好的选择。有一个名为Waypoints的Javascript库，非常适合处理这类事情


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

其想法是，当用户滚动到在#main设置的航路点时，处理器将触发。甚至有选择做不同的事情，如果用户正在上下滚动，并创建偏移量（因此，触发在一个页面的中间，例如）

这会让你到达你需要去的地方。
与其他一些答案相比，这可能有点过头了，但这是一个很好的选择。有一个名为Waypoints的Javascript库，非常适合处理这类事情


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

其想法是，当用户滚动到在#main设置的航路点时，处理器将触发。甚至有选择做不同的事情，如果用户正在上下滚动，并创建偏移量（因此，触发在一个页面的中间，例如）

这应该可以让您到达您需要去的地方。
您没有发布您尝试的JavaScript。您没有发布您尝试的JavaScript。这看起来不错，但我的演示中出现了一个错误。如果你不介意的话，你能从我的演示中拿出叉子让我看看你做了什么吗？在codepen演示中，默认情况下，标语会显示出来，这是不应该的。也许是某个地方的小错误？我的错。我隐藏了主div。我编辑了代码以使用linetag。这看起来不错，但在我的演示中出现了一个错误。如果你不介意的话，你能从我的演示中拿出叉子让我看看你做了什么吗？在codepen演示中，默认情况下，标语会显示出来，这是不应该的。也许是某个地方的小错误？我的错。我隐藏了主div。我编辑了代码来处理linetag。所以在这里，当你向下滚动300px后，跨度会显示出来吗？这是可行的，不像我预期的那样，但我可以利用它进行修改。谢谢这里在你向下滚动300px之后，跨度会显示出来吗？这是可行的，不像我预期的那样，但我可以利用它进行修改。谢谢这是一个很好的建议。不太符合上下文，但肯定很有帮助，谢谢。这是一个很好的建议。不太符合上下文，但绝对有帮助，谢谢。