Daiaiai Daiaiai - 1 year ago 54
jQuery Question

Display element if DOMs' scrollposition is greater then xyz

I want to display a fixed element if the users scroll position is greater then a certain height. So I tried to do this:

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

To explain it, if the users focus is greater then 700px I want to display the element
. The way I did the "700px" is weird, but I have no clue on how to do better.

Thanks for helping

Answer Source

700px is a syntax error. "700px" would be valid but wrong. Just use 700.

However, if you want to hide it again when the user scrolls back, use 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>