嗨,大家好
我想在滚动标题效果上创建一个 jquery。我刚刚在代码中添加了一些更改 但它不按我想要的方式工作。 我想要产生效果 - 当我向下滚动标题的位像素以将高度更改为小时。或者用其他样式显示隐藏的标题
因此,当滚动普通标题以向上滑动然后显示隐藏的标题时,如向下滑动... 我花了很多时间在这上面,但它只适用于 fadeIn 和 fadeOut
jQuery code
$(function() {
$('.header-small').hide();
var header = $(".header-small");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
$('.header-small').show();
header.removeClass('header').addClass("header-small");
$('.header-small').addClass('animated fadeInUp'), {duration:500};
} else {
$('header').show();
$('.header-small').hide();
header.removeClass("header-small").addClass('header');
$('header').addClass('animated fadeInDown');
}
});
});
工作演示 here
请有人帮我这个吗?
由于
答案 0 :(得分:0)
您可以尝试使用回调,
$(function() {
$('.header-small').hide();
var bar = $('header');
var top = bar.css('top');
$(window).scroll(function() {
if($(this).scrollTop() > 50) {
bar.stop().animate({'top' : '0px'}, 200);
$('.header-small').slideDown('slow',function(){
$('header').slideUp('slow');});
} else {
bar.stop().animate({'top' : '20px'}, 200);
$('header').slideDown('slow');
$('.header-small').slideUp('slow');
}
});
});
还有一些清洁效果的造型
header
{
position:absolute;
width:400px;
height:200px;
}
答案 1 :(得分:-1)
为什么不只是addClass并在CSS中完成剩下的工作?
$(window).scroll(function() {
if($(window).scrollTop() > 50) {
$('header').addClass('header-small');
}
else {
$('header').removeClass('header-small');
}
});
答案 2 :(得分:-1)
$(function () {
$('.header-small').hide();
var bar = $('header');
var top = bar.css('top');
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
bar.stop().animate({
'top': '0px'
}, 200);
$('header').slideUp('fast', function () {
$('.header-small').slideDown('slow');
});
} else {
bar.stop().animate({
'top': '20px'
}, 200);
$('.header-small').slideUp('fast', function () {
$('header').slideDown('fast');
});
}
});
});