使用粘性顶部元素的滚动事件上的fadeOut
使用粘性顶部元素的滚动事件上的fadeOut
提问于 2018-10-31 05:25:49
我正在使用带粘顶元素的bootstrap 4.1.3 / jQuery 3.3.1。
- 在向下滚动时我想隐藏顶部粘滞的元素(a Div)
- 在向上滚动时我想显示element
目前我得到的结果是：
当向下滚动循环时
- fadeOut fadeIn
- 当向上滚动时发生fadeIn (这就是我想要的)
原型演示：https://terminaladdict.com/ta_skeleton/
我只是在这里发布了相关的代码。
我猜我需要用fadeOut中的函数回调来停止执行？(注意我代码中的注释)
$(document).ready(function(){
var lastScrollTop = 0;
$(window).scroll(function () {
var st = $(this).scrollTop();
if (st > lastScrollTop) {
$('.searchBar').fadeOut(function(){
// do something here to stop fadeIn;
});
} else {
$('.searchBar').fadeIn();
}
lastScrollTop = st;
});
})<div class="searchBar container-fluid sticky-top p-3 topbar">
<div class="container">
<div class="terminalBG d-flex flex-row rounded border p-2 align-items-center">
<a class="ta_logo d-flex" href="#" data-toggle="tooltip" title="something">
text
</a>
<input type="text" name="query" id="query" placeholder="Search this website ..." class="form-control d-flex" />
</div>
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-10-31 07:03:35
更改为css过渡：
$(document).ready(function(){
var lastScrollTop = 0;
$(window).scroll(function () {
var st = $(this).scrollTop();
if (st > lastScrollTop) {
$('.searchBar').addClass('fadeOut');
$('.searchBar').removeClass('fadeIn');
} else {
$('.searchBar').addClass('fadeIn');
$('.searchBar').removeClass('fadeOut');
}
lastScrollTop = st;
});
});现在完美地工作了..不确定为什么fadeIn和fadeOut不能工作？
Stack Overflow用户
发布于 2018-10-31 06:03:27
我认为你可以通过尝试这个方法得到你想要的结果：https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp，它使用css转换而不是jquery，所以如果用户做了相反的操作，它允许取消转换/动画的状态。你可以这样做: document.getElementById("navbar").style.opacity =0，而不是使用: document.getElementById("navbar").style.top = "0"；
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53073145
复制相关文章
相似问题
腾讯云开发者
