如果 DOM 的滚动位置大于 xyz 则显示元素

Question

如果用户的滚动位置大于某个高度，我想显示一个固定元素。所以我试着这样做：

$(document).scroll(function() {
    if ($(document).scrollTop() > 700px) {
        $('#trigger_lisa').css("display", "block");
    }
})

为了解释它，如果用户的焦点大于700px，我想显示元素#trigger_lisa。我做"700px"的方式很奇怪，但我不知道如何做得更好。

感谢您帮助

Answer 1

700px是一个语法错误。"700px"将是有效的，但却是错误的。只需使用700。

但是，如果您想在用户向后滚动时再次隐藏它，请使用toggle:

$(document).scroll(function() {
  $('#trigger_lisa').toggle($(document).scrollTop() > 700);
});

body {
  height: 10000px;
}
#trigger_lisa {
  position: fixed;
  top: 0;
  background: blue;
  height: 200px;
  width: 200px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="trigger_lisa"></div>

Answer 2

您的代码有不正确的表示法，在这种情况下不需要"px"，"700"必须是一个数字。在一般情况下，您的代码可以工作：

$(document).scroll(function() {
    if($(document).scrollTop()>700)
    {
        $('#trigger_lisa').css("display","block");
    }
});

.wrapper {
  height: 3000px;
}
#trigger_lisa {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -10px;
  margin-left: -50px;
  width: 100px;
  height: 20px;
  background-color: #323232;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div id="trigger_lisa"></div>
</div>

https://jsfiddle.net/Romanzhivo/p7bcjvm4/1/