如何在滚动网站时显示我的文字

How can I make my text appear when scrolling? I've found this http://www.jqueryrain.com/?HZtLD8hN but I'd like to know how it works. There was a similar question asked but I don't understand it. Can someone explain, or provide examples, how to make this work?

滚动时如何显示文本？我已经找到了这个http://www.jqueryrain.com/?HZtLD8hN，但我想知道它是如何工作的。有一个类似的问题，但我不明白。有人可以解释或提供示例，如何使这项工作？

Thanks

谢谢

HTML

<div id = "divToShowHide" class = "BeforeScroll">Content i want to appear while scrolling</div>

CSS

.BeforeScroll {
width: 100%;
height: 200px;
background-color: yellow;
}

.AfterScroll {
width: 100%;
height: 200px;
background-color: red;
}

1 个解决方案

#1

A basic example is this: say some of your content is in a<div id="appearble_text"> that is at 70% of the total height of the page. <div id="container">

一个基本的例子是：你的一些内容是在

中，它占页面总高度的70％。

Initially you will set document.getElementById("appearable_text").style.display = "none";

最初你将设置document.getElementById（“appearable_text”）。style.display =“none”;

You can set up a function

您可以设置功能

function OnScroll() {

            var totalHeight = this.offsetHeight; //(this, because container is the caller of the function from the code below)
            if (this.scrollTop || this.scrollTop > totalHeight * 0.7) { //if scrolling reached 70% of height
               document.getElementById("appearable_text").style.display = "block"; 
            }
        }

and then use it

然后使用它

var container = document.getElementById("container");
container.onscroll = OnScroll;

Of course, instead of just suddenly displaying the <div> you can fade it in or do all sorts of CSS/JQuery tricks you like.

当然，而不是只是突然显示

，你可以淡入它或做你喜欢的各种CSS / JQuery技巧。

#1