将DIV推到页面首屏以下？使用Jquery实现？

Question

4

有没有一种方法可以将一个

标签推到屏幕的下方，在页面加载时不显示它，除非用户向下滚动？我知道有一些叫做JQuery viewport的东西，但不确定如何使用它。我也不想用CSS将

标签隐藏起来。

- MayurOnWordpress

2个回答

2

使用jQuery来设置一个top或margin-top CSS属性，使它等于viewport的高度如何：

$(function () {
    $('#my-under-the-fold-element').css({
        top : $(window).height()
    });
});

然后您只需要将元素的位置设置为绝对定位。

- Jasper

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- rgthree · Accepted Answer

你不需要任何JavaScript！只需要好的 “老式” CSS。将作为 <body> 的子元素的元素设置为 position:absolute; top:100%;，然后你就会得到你想要的在屏幕下方的元素。

.below {
    position: absolute;
    top:100%;
}

此外，与使用JavaScript设置静态的上边距或外边距不同，即使在调整浏览器窗口大小后仍然有效。

以下是具有完整标记的jsFiddle：http://jsfiddle.net/ubhBL/