滚动固定高度div时隐藏/显示div

时间:2014-11-21 10:28:31

标签: html scroll

我正在创建一个带有文本框的基于PHP的站点。通常文本字段溢出,所以我使用自动y溢出使其固定高度。

要在可见空间下方显示更多文字,我想淡出文字的底部。有很多技术可以做到这一点。我想要的方法是在文本顶部添加一个div标签,其中包含背景图像的副本,该副本会逐渐变为透明。问题是,当你点击滚动的底部时,我想要隐藏这个div标签,然后在向上滚动时再次显示,然后在向下滚动时在show的顶部显示隐藏的div,并在返回顶部时隐藏页。

我已经改编了一个jsfiddle,但没有多少看。我错过了什么想法?

原始js在这里http://jsfiddle.net/apaul34208/ZyKar/1067/

我的改编版本在http://jsfiddle.net/ZyKar/1702/

$(document).scroll(function () {
    //Show element after user scrolls 800px
    var y = $('.content').scrollTop();
    if (y > 100) {
        $('.bottom').fadeOut();
        $('.top').fadeIn();
    } else {
        $('.bottom').fadeIn();
        $('.top').fadeOut();
    }
});

我尝试了淡入淡出,直到我尝试将滚动调整为基于内容div中的滚动而不是整个身体。

任何帮助表示赞赏

2 个答案:

答案 0 :(得分:0)

也许您将滚动条附加到内容div?

这样做:

$('.content').scroll(function () {

而不是:

$(document).scroll(function () {

Here's the jsfiddle

答案 1 :(得分:0)

嗯,我不知道我是否完全理解你的问题,但听起来你想要这样的想法:

$('.content').scroll(function () {

而不是

$(document).scroll(function () {

既然你想知道用户在你的元素上滚动了多远而不是在整个页面上滚动,那么你呢?

更新了您的FIDDLE