如何在滚动网站时显示我的文字 [英] How to make my text appearing while scrolling website

问题描述

如何在滚动时显示文字？我找到了这个 http://www.jqueryrain.com/?HZtLD8hN ，但我想要知道它是如何工作的。有一个类似的问题，但我不明白。

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?

感谢

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

推荐答案

说您的某些内容位于页面总高度的70％的< div id =appearble_text> 中。 < div id =container>

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

最初您将设置 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& code>你可以淡入它或做你喜欢的各种CSS / JQuery技巧。

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

这篇关于如何在滚动网站时显示我的文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！