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

Question

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

谢谢

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

Answer 1

一个基本的例子是这样的:假设您的一些内容在 <div id="appearble_text"> 中即页面总高度的 70%。 <div id="container">

最初你会设置document.getElementById("appearable_text").style.display = "none";

可以设置一个函数

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"; 
            }
        }

然后使用它

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

当然，不是突然显示 <div>您可以淡入淡出或使用您喜欢的各种 CSS/JQuery 技巧。