Question

我有以下HTML：

<div id="header">
</div>

<div id="content">
    <div id="test"></div>
    <div style="height:1280px;"></div>
</div>

的jQuery

$(document).ready(function() {            
    $('#content').scroll(function(){
        console.log($('#test').scrollTop());

        if($('#test').scrollTop()<=100) {
            $('#header').addClass('shadow');
        }
        else {
            $('#header').removeClass('shadow');
        }
    });
});

这是一个小提琴：http://jsfiddle.net/sZ89D/

在其中我有一个固定的标题，当用户滚动一个id小于它的高度（100px）的div时，它会应用一个类。该类已应用，但未再次删除，控制台记录代码，结果是scrollTop始终为0 ...

任何想法是什么问题？感谢

Answer 1

因此，您希望在向下滚动时显示阴影，在向后滚动到顶部时消失阴影？

$(document).ready(function(){

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

                console.log($('#content').scrollTop());

                if($('#content').scrollTop()<=100)
                {
                    $('#header').removeClass('shadow');
                }
                else
                {
                    $('#header').addClass('shadow');
                }
            });

        });

交换$（'#test'）。scrollTop（）获取$（'＃content'）。scrollTop（），并反转添加/删除类函数。

Answer 2

将#test更改为#content似乎可以解决问题：

if($('#content').scrollTop()<=100)

Answer 3

这有效：

if($('#content').scrollTop()<=100)
                    {
                        $('#header').removeClass('shadow');
                    }
                    else
                    {
                        $('#header').addClass('shadow');
                    }

基于@MassivePenguin的评论

jQuery scrollTop总是返回0

3 个答案: