Question

我创建了一些div，我把社交链接放在哪里。我希望当用户滚动页面时更多，然后＆gt; 100，它淡入淡出，当用户回到＆lt; 100，fadeOut。我怎么能这样做？

Answer 1

demo：http://so.devilmaycode.it/fadein-and-fadeout-when-page-scroll/

<style type="text/css">
    #social-icons-wrapper {
    /* CUSTOM PROPERTIES */
    padding:10px;
    text-align:center;
    font-size:20px; 
    background: #000;
    color:#fff;
    width:100%;
    height:32px;
    /* REQUIRED PROPERTIES */
    display:none;
    position: fixed;
    top: 0;
    z-index: 999999;
}
</style>

<div id="social-icons-wrapper"><!-- SOCIAL ICONS HERE --></div>

<script type="text/javascript">
//<![CDATA[
 $(function () {
     $(window).scroll(function () {
         if ($(this).scrollTop() > 100) {
             $('#social-icons-wrapper').stop().fadeIn(200);
         } else {
             $('#social-icons-wrapper').stop().fadeOut(200);
         }
     });
 });
//]]> 
</script>

页面滚动时FadeIn和FadeOut

1 个答案: