使用 Bootstrap3 更改滚动 Jquery 上导航栏的高度
Change Height of Navbar on Scroll Jquery with Bootstrap3
您好,我的导航栏有问题。
我想在滚动上为它设置动画并改变他的高度。当我向下滚动一点时,它应该动画更小,当我在页面顶部时,它应该动画更大。标准高度为 100px。问题是当我在页面顶部时需要延迟,我需要等待,直到它动画化。如果我先滚动到页面底部然后回到顶部,它们的延迟会变长。的高度为 11000 像素。这是我的代码:
$(document).on("scroll",function(){
if($(document).scrollTop()>500)
{
$( ".navbar" ).animate({height: 50} ,{duration:100});
}
else if($(document).scrollTop()==0)
{
alert("dhsihsp");
$( ".navbar" ).animate({height: 100} ,{duration:100});
}
});
也许你能帮我。我使用 Google Chrome 和 Bootstrap 3.
您遇到的问题是每次滚动条移动时都会触发 "scroll"。所以每次滚动条移动一个像素时,它都会进行 IF 检查。这就是为什么你延迟你的动画这么久。如果您将滚动条移动太多,运行 的队列就会堆积起来。
当您滚动时,滚动事件似乎会触发很多次,因此所有事件都会排队。所以真正改变你的事件header似乎需要很长时间才能出现。
我在 .navbar
的高度添加了一个 css 过渡。使这几乎立即发生。事件不还在吗? 正确,但更改 css 比添加动画(持续时间为 100 毫秒)的要求要低得多。过渡确实有一个持续时间,但它不必完成,因此其他事件可以随时进入。
CSS
.navbar {
transition: height 0.1s;
}
Jquery
$(window).scroll(function () {
var scrollh = $(this).scrollTop();
if (scrollh == 0) {
$(".navbar").css({
'height':'100px',
});
} else {
$(".navbar").css({
'height':'50px',
});
}
});
您好,我的导航栏有问题。 我想在滚动上为它设置动画并改变他的高度。当我向下滚动一点时,它应该动画更小,当我在页面顶部时,它应该动画更大。标准高度为 100px。问题是当我在页面顶部时需要延迟,我需要等待,直到它动画化。如果我先滚动到页面底部然后回到顶部,它们的延迟会变长。的高度为 11000 像素。这是我的代码:
$(document).on("scroll",function(){
if($(document).scrollTop()>500)
{
$( ".navbar" ).animate({height: 50} ,{duration:100});
}
else if($(document).scrollTop()==0)
{
alert("dhsihsp");
$( ".navbar" ).animate({height: 100} ,{duration:100});
}
});
也许你能帮我。我使用 Google Chrome 和 Bootstrap 3.
您遇到的问题是每次滚动条移动时都会触发 "scroll"。所以每次滚动条移动一个像素时,它都会进行 IF 检查。这就是为什么你延迟你的动画这么久。如果您将滚动条移动太多,运行 的队列就会堆积起来。
当您滚动时,滚动事件似乎会触发很多次,因此所有事件都会排队。所以真正改变你的事件header似乎需要很长时间才能出现。
我在 .navbar
的高度添加了一个 css 过渡。使这几乎立即发生。事件不还在吗? 正确,但更改 css 比添加动画(持续时间为 100 毫秒)的要求要低得多。过渡确实有一个持续时间,但它不必完成,因此其他事件可以随时进入。
CSS
.navbar {
transition: height 0.1s;
}
Jquery
$(window).scroll(function () {
var scrollh = $(this).scrollTop();
if (scrollh == 0) {
$(".navbar").css({
'height':'100px',
});
} else {
$(".navbar").css({
'height':'50px',
});
}
});