2012-07-28 50 views
0

我已经实现了一个在滚动上淡出图像的脚本。在淡入淡出的脚本前带上div

这是它:

<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 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

如果你看看右上角你会看到它。

所以我的问题是,我如何把它带到前面?

谢谢!

回答

0

在页面的下方,你有一个div#content_container,它的z-index为10.所以,你至少需要一个11的z-index才能让它出现在最上面。

其次,问题是div内的图像无法加载。这意味着div没有高度或宽度。