Question

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

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

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

感谢您的帮助

Answer 1

700px是语法错误。 "700px"有效但错误。只需使用700。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你的代码有不正确的符号，＆＃34; px＆＃34;不需要这种情况，＆＃34; 700＆＃34;必须是一个数字。一般情况下，您的代码有效：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

显示元素，如果DOMs＆＃39; scrollposition大于xyz

2 个答案: