Question

我想使用jQuery.scroll在用户在div中滚动时显示阴影（如果滚动条在顶部则隐藏此阴影）。它在这里工作得非常好：http://jsfiddle.net/C4S6s/。

当我把这个div放在模板中时它不起作用:( 我不太熟悉模板，所以也许我会错过一些东西。

<script>$(".main-scroll-area").scroll(function () {

           var div = $(this);
           if (div.scrollTop() == 0)
           {
              $('.header-shadow').removeClass('shadow-scrolled');
           } else {
              $('.header-shadow').addClass('shadow-scrolled');
           }

        });

其他信息

这是影子的css：

.shadow-scrolled {
   -webkit-box-shadow:0 2px 2px -1px rgba(0,0,0,.6);
   -moz-box-shadow:0 2px 2px -1px rgba(0,0,0,.6);
   box-shadow:0 2px 2px -1px rgba(0,0,0,.6);
}

这是不起作用的模板代码。我还使用上面写的jQuery来显示或隐藏阴影。

<script type="text/template" id="MeetingView">
<section class="middle-column" style="background: none repeat scroll 0 0 white;bottom: 0;left: 239px;overflow: hidden;padding: 20px 0 0;position: absolute;right: 381px;top: 42px;">
    <div class="header-shadow" style="background-color: #FFFFFF;height: 61px;position: relative;width: 100%;z-index: 9;">

    </div>

    <div class="main-scroll-area" style="bottom: 0;left: 0;overflow: auto;padding-left: 20px;position: absolute;right: 0;top: 81px;height: 200px;width: 200px;">
        this is my content<br />
        when scrolldown, shadow appears<br />
        when scrollbar at 0, shadow disappears<br />
        this is my content<br />
        when scrolldown, shadow appears<br />
        when scrollbar at 0, shadow disappears<br />
        this is my content<br />
        when scrolldown, shadow appears<br />
        when scrollbar at 0, shadow disappears<br />
    </div>
</section>

Answer 1

您似乎没有等待加载DOM。只需将代码包装在$(document).ready()中即可。 jsfiddle为你做到了（请参阅左上角的下拉列表，您可以选择onload，onready，without wrap等）。

$(document).ready(function () {
    $(".main-scroll-area").scroll(function () {

        var div = $(this);
        if (div.scrollTop() == 0) {
            $('.header-shadow').removeClass('shadow-scrolled');
        } else {
            $('.header-shadow').addClass('shadow-scrolled');
        }

    });
});

Answer 2

如果将jQuery放入模板中，它可以正常工作。如果jQuery在外面，它就不起作用。

当我在模板中使用它时，jQuery.scroll不起作用

2 个答案: