JQuery无法在滚动时尝试“显示:阻止”

时间:2014-04-13 09:44:26

标签: javascript jquery html css scroll

我在这里有一个简单的代码可以使div显示(从display:none;到display:block;)

我在JSFiddle中测试了这个并且它可以工作,但不是在我的localhost中。我认为这是脚本标签的内容。

我可以在我的Localhost wamp服务器上看到带有F12的css和js文件,但它不起作用。 感谢。

HTML:

<html>
 <head>
  <title>Untitled Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script type="text/javascript" src="scripts/up.js"></script>
  <link href="../css/style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
  <div id="scroll_top">Hello World</div>
  <div class="container">
   <?php include("includes/header.php");?>
   <div class="content">
    <?php include("includes/navigation.php");?>
     <div class="main_content">
     </div>
    </div>
    <?php include("includes/footer.php"); ?>
   </div>
 </body>
</html>

CSS:

#scroll_top{
    position:fixed;
    display:none;
    background-color:#FFF;
}

JS:

var $logo = $('#scroll_top');
$(document).scroll(function() {
    $logo.css({display: $(this).scrollTop() > 100? "block":"none"});
});

这是一个由Roko C. Buljan设计的JSFiddle,位置固定且有效。 http://jsfiddle.net/psvn9/400/

1 个答案:

答案 0 :(得分:1)

Check for demo

var $logo = $('#scroll_top');
    $(document).scroll(function() {
        if($(this).scrollTop()> 100)
        {   //alert("scop");
     //  $logo.css({display: $(this).scrollTop() > 100? "block":"none"});
         $('#scroll_top').css("display", "block");
        }else{
             $('#scroll_top').css("display", "none");
        }

    });