slideToggle 连续上下动画 div
slideToggle is animating the div up and down continuously
我正在使用 slideToggle 使我的 header 在 scrollTop 达到 100 时随页面移动。但是一旦滚动条达到 100 或更多,它就会保持上下动画片刻。
这是我的代码:
$(window).scroll(function(){
var ScrollTop = $(window).scrollTop();
if(ScrollTop>=100){
$('#main_header').removeClass("relative");
$('#main_header').addClass("fixed");
$('#main_header').slideToggle("slow");
}else if(ScrollTop<=99){
$('#main_header').removeClass("fixed");
$('#main_header').addClass("relative");
}
});
请告诉我怎么了?
你是在对浏览器说,每当用户向下滚动页面时,看看他们走了多远。如果他们的行程超过 99,则滑动 header,否则进行其他 class 切换。
假设他们滚动到 120,它会滑动。然后他们向下滚动到 140,它会滑动。你没有检查它是否已经滑下,因此它会继续这样做。一个简单的方法是只添加一个布尔值:-
var toggled = false;
$(window).scroll(function () {
var ScrollTop = $(window).scrollTop();
if (ScrollTop >= 100 && !toggled) {
$('#main_header')
.removeClass("relative")
.addClass("fixed")
.stop() // stop any prev animation
.css('display', 'none') // force hide so it slides
.slideToggle("slow");
toggled = true; // won't enter again until set to false
} else if (ScrollTop <= 99 && toggled) {
$('#main_header').removeClass("fixed");
$('#main_header').addClass("relative");
toggled = false; // scrolled back up, can now slideToggle again!
}
});
使用jQuery.stop()
方法:
$(window).scroll(function(){
var ScrollTop = $(window).scrollTop();
if(ScrollTop>=100) {
$('#main_header').removeClass("relative");
$('#main_header').addClass("fixed");
$('#main_header').stop(true).slideToggle("slow");
} else if(ScrollTop<=99) {
$('#main_header').removeClass("fixed");
$('#main_header').addClass("relative");
}
});
我正在使用 slideToggle 使我的 header 在 scrollTop 达到 100 时随页面移动。但是一旦滚动条达到 100 或更多,它就会保持上下动画片刻。 这是我的代码:
$(window).scroll(function(){
var ScrollTop = $(window).scrollTop();
if(ScrollTop>=100){
$('#main_header').removeClass("relative");
$('#main_header').addClass("fixed");
$('#main_header').slideToggle("slow");
}else if(ScrollTop<=99){
$('#main_header').removeClass("fixed");
$('#main_header').addClass("relative");
}
});
请告诉我怎么了?
你是在对浏览器说,每当用户向下滚动页面时,看看他们走了多远。如果他们的行程超过 99,则滑动 header,否则进行其他 class 切换。
假设他们滚动到 120,它会滑动。然后他们向下滚动到 140,它会滑动。你没有检查它是否已经滑下,因此它会继续这样做。一个简单的方法是只添加一个布尔值:-
var toggled = false;
$(window).scroll(function () {
var ScrollTop = $(window).scrollTop();
if (ScrollTop >= 100 && !toggled) {
$('#main_header')
.removeClass("relative")
.addClass("fixed")
.stop() // stop any prev animation
.css('display', 'none') // force hide so it slides
.slideToggle("slow");
toggled = true; // won't enter again until set to false
} else if (ScrollTop <= 99 && toggled) {
$('#main_header').removeClass("fixed");
$('#main_header').addClass("relative");
toggled = false; // scrolled back up, can now slideToggle again!
}
});
使用jQuery.stop()
方法:
$(window).scroll(function(){
var ScrollTop = $(window).scrollTop();
if(ScrollTop>=100) {
$('#main_header').removeClass("relative");
$('#main_header').addClass("fixed");
$('#main_header').stop(true).slideToggle("slow");
} else if(ScrollTop<=99) {
$('#main_header').removeClass("fixed");
$('#main_header').addClass("relative");
}
});