使用 JQuery WordPress 在滚动时显示/隐藏 div

Question

我在我的网站上有一个带有社交栏的div，但我想仅在用户滚动一点后显示它，并在用户即将到达页脚时将其隐藏。所以在页面结束之前大约 200px。

这是我的div：

<div class="sticky-bar-hr">
.......
</div>

这是我的 CSS：

.sticky-bar-hr{
    display: none;
}

这就是我正在尝试的JQuery：

 <script> 
$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.sticky-bar-hr').fadeOut();
  } else {
    $('.sticky-bar-hr').fadeIn();
  }
});
</script>

但它不起作用。问题似乎是没有调用该函数。我正在Wordpress的主页HTML中设置脚本

有什么帮助吗？

提前致谢

Answer 1

试试这个

$(window).scroll(function() {
	var y = $(this).scrollTop();
	if(y<200) {
		$('.sticky-bar-hr').fadeOut();
	}
	if (y > 200) {
		$('.sticky-bar-hr').fadeIn();
	} 
	if(y+ $(this).height() == $(document).height()) {
		$('.sticky-bar-hr').fadeOut();
	}
});

body {
	height: 2000px;
}
.sticky-bar-hr {
		position:fixed;
		bottom: 0;
		width: 100%;
		height: 50px;
		background:#000;
		display: none;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sticky-bar-hr">

Answer 2

这是因为您颠倒了fadeIn和fadeOut。

这是一个工作片段：

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.sticky-bar-hr').fadeOut();
  } else {
    $('.sticky-bar-hr').fadeIn();
  }
});

.sticky-bar-hr{
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sticky-bar-hr">
.......
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>