Question

jquery无效

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var divs = $('.social, .title');
$(window).scroll(function(){
   if($(window).scrollTop()<5){
         divs.stop(true,true).fadeIn("fast");
   } else {
         divs.stop(true,true).fadeOut("fast");
   }
});
</script>
</head>



<body>
<div class="social">
        <p>Social links here</p>
    </div>

    <div class="title">
        <p>Some text</p>
    </div>

<div class="banner">
    <img src="http://lorempixel.com/920/700/" alt="">
</div>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>
<p>Text to simulate scrolling</p>


</body>
</html>

Answer 1

您需要将代码放在jquery的Document.ready函数中。否则，代码执行时不会加载HTML元素：

Fiddle Demo

$( document ).ready(function() {
var divs = $('.social, .title');
   $(window).scroll(function(){
     if($(window).scrollTop()<5){
         divs.stop(true,true).fadeIn("fast");
     } else {
         divs.stop(true,true).fadeOut("fast");
     }
    });
});

jquery fadeout onscroll无效

1 个答案: