应用错误收集

如何在特定点之外滚动调用javascript函数

时间：2013-12-27 14:21:46

标签： javascript html scroll

我是JavaScript新手并尝试了一个简单的代码（纯JavaScript中）我创建了一个代码，当用户滚动一个点（例如300px）时，使一个不可见的文本块（display:none;）可见（display:block;）。这是我的完整代码

<!DOCTYPE html>
<html>
<head>
<style>
body{
    position: absolute;
}
p{
    margin-top: 300px;
    margin-left: 50%;
    display: none;
}
</style>
<script type="text/javascript">
onscroll = function() {
  if (scrollTop > 400) {
    getElementById('p').style.cssText ="display:block;";
  } else {
    if {
      getElementById('p').style.cssText ="display:none;";
    }
  }
};
</script>
</head>
<body>
<p id="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>

2 个答案:

答案 0 :(得分：2)

window.onscroll = function() {
  if (window.scrollY > 400) {
    document.getElementById('p').style.cssText ="display:block;";
  } else {

      document.getElementById('p').style.cssText ="display:none;";

  }};

我删除了空if块，它没有条件 scrollTop在DOM API中不存在它的scrollY

获得最佳跨浏览器解决方案;使用jquery scrollTop函数

答案 1 :(得分：0)

<强> Fiddle demo

JQuery的

$(document).scroll(function(){
    if($("body").scrollTop()>=200)
    {
        $("#p2").css("display", "block");
    }
})

HTML

<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p id="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

CSS

        body {
            position: absolute;
        }
        p
        {
            line-height:90px;
            background-color:yellow;
        }
        p#p2 {
            display: none;
            background-color:orange;
        }

此处第二个<p>元素默认隐藏，当body向下滚动200像素时，它会显示出来。