0

当用户在 div 中向下滚动时，我想使用 jQuery.scroll 显示阴影（如果滚动条在顶部，则隐藏此阴影）。它在这里工作得很好：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>

4

2 回答 2

0

您似乎没有等待 DOM 加载。只需将您的代码包装在$(document).ready(). jsfiddle 会为您执行此操作（请参阅左上角的下拉菜单，您可以在其中选择 onload、onready、no 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');
        }

    });
});
于 2013-02-07T03:41:26.253 回答
0

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

于 2013-02-08T15:33:23.853 回答