Question

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

这是我的div：

TicketNumber    Steps
2               A
3               A

这是我的CSS：

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

这是我正在尝试的JQuery：

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

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

任何帮助？

提前致谢

Answer 1

试试这个

＆＃13;

$(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();
	}
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这是因为您推翻了fadeIn和fadeOut。

这是一个工作片段：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: