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

jQueryをテンプレートに入れると、正常に機能します。jQueryが外部にある場合、それは機能しません。

于 2013-02-08T15:33:23.853 に答える
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 に答える