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

【问题标题】：Hide/show divs when scrolling a fixed height div滚动固定高度 div 时隐藏/显示 div
【发布时间】：2014-11-21 10:28:31
【问题描述】：

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

为了在可见空间下方显示更多文本，我想淡出文本底部。有很多技术可以做到这一点。我想去的方式是在文本顶部添加一个 div 标签，其中包含背景图像的副本，该副本逐渐变为透明。问题是当你点击滚动的底部时，我希望这个 div 标签隐藏，然后在向上滚动时再次显示，然后在向下滚动时显示顶部的隐藏 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 中的滚动而不是整个正文之前，我一直在使用淡入淡出。

任何帮助表示赞赏

【问题讨论】：

标签： html scroll

【解决方案1】：

如果您改为将滚动条附加到内容 div 上？

这样做：

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

而不是这个：

$(document).scroll(function () {

Here's the jsfiddle

【讨论】：

【解决方案2】：

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

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

代替

$(document).scroll(function () {

既然您想知道用户在您的元素上而不是在整个页面上滚动了多远，是吗？

更新了你的FIDDLE

【讨论】：