0

スクロール時に画像をフェードするスクリプトを実装しました。

これだよ：

<script type="text/javascript">
        // The social div 
    var $socialDiv,
        // The social div's height 
        socialDivHeight = 500,
        currentSocialDivHeight = socialDivHeight;


    $(document).ready(function() {
        $socialDiv = $('.social');
        $socialDiv.css({
            'background-image': 'url(http://a3.sphotos.ak.fbcdn.net/hphotos-ak-prn1/563655_324264884301748_471368753_n.jpg)',
            'background-repeat': 'no-repeat',
            'background-attachment': 'fixed',
           'background-size' : '110% auto',
            'height' : socialDivHeight + 'px',
            'margin-left' : '-50%',
            'margin-right' : '-50%',
            'margin-top': '200opx',

        });
    });


    $(window).scroll(function() { 
        //Get scroll position of window 
        var windowScroll = $(this).scrollTop(); 

        var newSocialDivHeight = Math.max(0, socialDivHeight - windowScroll);

        if (Math.abs(newSocialDivHeight - currentSocialDivHeight) < 1)
            return;

        $socialDiv.css({
            'opacity' : 1 - windowScroll / 400
        });

        currentSocialDivHeight = newSocialDivHeight;
    });
</script>

ただし、この上にdivを配置しようとしています。そして、z-indexは機能していません。

私のDiv：

<div style="position: absolute; top: 20px; left: 20px; z-index: 1;">
    <img src="http://images5.fanpop.com/image/photos/24600000/Hello-Kitty-Mving-Glittery-Dress-hello-kitty-24617449-320-310.gif" width="119" height="82" />
</div>

私のサイト：

http://cargocollective.com/btatest

右上を見るとわかります。

だから私の質問は; どうすれば前面に表示できますか？

ありがとう！

4

1 に答える 1

0

ページの下部には、z-index が 10 の div#content_container があります。したがって、それを上に表示するには、少なくとも 11 の z-index が必要です。

次に、div 内の画像が読み込まれないという問題があります。これは、div に高さや幅がないことを意味します。

于 2012-07-28T18:42:04.067 に答える