将第三个条件应用于函数
我有以下功能，当用户向上滚动时将css应用到#screen-nav，当用户向下滚动时应用不同的css
jQuery(document).ready(function($){
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('nav').outerHeight(true);
$(window).scroll(function(event) { didScroll = true; });
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 0);
function hasScrolled() {
if($( window ).width() > 768) {
var st = $(this).scrollTop();
if (Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop) {
// Scroll Down
$('#screen-nav').removeClass('nav-down').addClass('nav-up');
} else {
$('#screen-nav').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
});css
#screen-nav {
position: fixed;
top: 0; left: 0; right: 0;
}
#screen-nav.nav-up { top: -100px; }
#screen-nav.nav-down { top: 0; }我想添加第三个类。当用户距离顶部300px时，我想要#screen-nav { top: 50px；}。(因此，当用户处于该位置时，我想应用第三个类.nav-top )，但不确定如何将其集成到我的代码中。
基本上，我希望导航(导航)出现在页面较低的时候，当用户在顶部，当它下来时，当用户向上滚动时，我希望它正好在顶部。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-07-07 14:14:35
如果(St Screen 300){ $(“# == -nav”).css({ top：'50px‘})；}
<script type="text/javascript">
jQuery(document).ready(function($){
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('nav').outerHeight(true);
$(window).scroll(function(event) { didScroll = true; });
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 0);
function hasScrolled() {
if($( window ).width() > 768) {
var st = $(this).scrollTop();
if (Math.abs(lastScrollTop - st) <= delta)
return;
if(st == 300)
{
$("#screen-nav").css({ top: '50px' });
}
else if (st > lastScrollTop) {
// Scroll Down
$('#screen-nav').removeClass('nav-down').addClass('nav-up');
}
else {
$('#screen-nav').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44972700
复制相关文章
相似问题
将条件函数应用于数据
将条件应用于聚合函数结果
R:将多个条件应用于向量的函数
满足条件时将函数应用于列值
将条件应用于jQuery.when()延迟函数
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
