jquery - 停止用作背景的书面文本推送内容

Question

我正在尝试使用文本作为页面的背景，并希望正文的主要内容显示在该文本之上。显示的方法 here适用于静态文本，但我的文本是使用 jquery 动态打印的。

这是我目前所拥有的:

html

<h1>body content </h1>

CSS

@import url(http://fonts.googleapis.com/css?family=Lobster);

#msg{
    text-align:left;
    font-size:30px;
    font-family:lobster;
    color:#bb4e28;
    float:none;
    z-index: -1;
    overflow: hidden;
}

j查询

var showText = function (target, message, index, interval) {
    if (index < message.length) {
        $(target).append(message[index++]);
        setTimeout(function () {
            showText(target, message, index, interval);
        }, interval);
    }
};

$(function () {

    showText("#msg", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra risus et nunc fermentum sed iaculis tortor rhoncus. Nulla facilisi. Nulla pharetra libero sed urna semper eu viverra orci volutpat. Mauris est dolor, porta ut sollicitudin sit amet, molestie vitae lectus. ", 0, 20);

});

http://jsfiddle.net/J7JTB/

您现在可以看到背景文本将其余内容向下推。我想要的是它在内容后面打印，并且在达到一定长度时不会导致页面滚动。有办法吗？

Answer 1

#msg {
    position: fixed;
} 

http://jsfiddle.net/isherwood/J7JTB/3/