Question

我尝试实现一个用户在我的网站上滚动时变小的标题。标识和标题部分已完成，但是当我尝试调整导航文本的大小时，某些内容会被破坏，标题在滚动时不再缩小。这是我的破解代码，文本大小调整:( #HOME是与导航链接关联的样式的ID）：

$(function () {
    $('#Header').data('size', 'big');
});

$(window).scroll(function () {
    if ($(document).scrollTop() > 0) {
        if ($('#Header').data('size') == 'big') {
            $('#Header').data('size', 'small');
            $('#Header').stop().animate({
                height: '60px'
            }, 600);
            $('#Logo').stop().animate({
                height: '40px',
                width: '40px'
            }, 600);
            $('#Logo:hover').stop().animate({
                height: '40px',
                width: '40px'
            }, 600);
            $('#HOME').stop().animate({
                font - size: '14px',
                top: '20px'
            }, 600);
        }
    } else {
        if ($('#Header').data('size') == 'small') {
            $('#Header').data('size', 'big');
            $('#Header').stop().animate({
                height: '100px'
            }, 600);
            $('#Logo').stop().animate({
                height: '85px',
                width: '81px'
            }, 600);
            $('#Logo:hover').stop().animate({
                height: '40px',
                width: '40px'
            }, 600);
            $('#HOME').stop().animate({
                font - size: '17px',
                top: '40px'
            }, 600);
        }
    }
});

另外，如果有人告诉我一个更简洁的方法，我会很感激：P

Answer 1

$(function () {
    $('#Header').data('size', 'big');

    $(window).scroll(function () {
        if ($(document).scrollTop() > 0) {
            if ($('#Header').data('size') == 'big') {
                $('#Header').data('size', 'small');
                $('#Header').stop().animate({
                    height: '60px'
                }, 600);
                $('#Logo').stop().animate({
                    height: '40px',
                    width: '40px'
                }, 600);
                $('#Logo:hover').stop().animate({
                    height: '40px',
                    width: '40px'
                }, 600);
                $('#HOME').stop().animate({
                    font - size: '14px',
                    top: '20px'
                }, 600);
            }
        } else {
            if ($('#Header').data('size') == 'small') {
                $('#Header').data('size', 'big');
                $('#Header').stop().animate({
                    height: '100px'
                }, 600);
                $('#Logo').stop().animate({
                    height: '85px',
                    width: '81px'
                }, 600);
                $('#Logo:hover').stop().animate({
                    height: '40px',
                    width: '40px'
                }, 600);
                $('#HOME').stop().animate({
                    font - size: '17px',
                    top: '40px'
                }, 600);
            }
        }
    });
});

该事件需要绑定在document.ready或此实现$(function () { ... });方法中。否则它可能会在控件准备好之前绑定。

使用jQuery更改滚动文本CSS

1 个答案: