Question

我正在尝试为我的网站添加一个很好的标题，缩小滚动。它有效......

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

$(window).scroll(function(){
    var $nav = $('#header_nav');
    if ($('body').scrollTop() > 0) {
        if ($nav.data('size') == 'big') {
            $nav.data('size','small').stop().animate({
                height:'40px'
            }, 350);
        }
    } else {
        if ($nav.data('size') == 'small') {
            $nav.data('size','big').stop().animate({
                height:'100px'
            }, 350);
        }  
    }
});

唯一的问题是我一直试图让div中的文字消失/缩小。 IBM已经在自己的网站上完成了这项工作：http://www.ibm.com/ca/en/

正如你所看到的，他们的徽标缩小了，他们的文字消失了，他们的顶级文字完全隐藏/消失了。

如何编辑当前代码以执行相同操作。这是一个JSFiddle：http://jsfiddle.net/PMgE5/

此代码是否需要css？我需要编辑css属性吗？哪个更有效率？也许我应该尝试使用CSS动画或变换？

Answer 1

您应该使用toggleclass＆gt;交换类，而不是仅缩小标题。 https://api.jquery.com/toggleClass/

这样，您可以创建两个类，一个用于“大”标题，另一个用于小标题。

你可以根据滚动状态在各类之间进行交换。

滚动时Jquery / css标题缩小。使文字消失并放大

1 个答案: