Question

我有一个功能，当用户滚动窗口顶部时，它会更改标题的高度和列表项的填充。函数的这一部分很好，但是当用户滚动回到顶部时，我试图让标题和列表项恢复到原始大小。有什么想法吗？

$(function(){
    var header = $('#header');
    var padding = $('#header ul li a');
    var headerPosTop = header.offset().top;
    var win = $(window);
    win.scroll(function(e){
        var scrollTop = win.scrollTop();
        if(scrollTop >= headerPosTop){
            header.css({height:'60px'});
            padding.css({padding:'17px 12px'});
        }
    });
});

Answer 1

尝试在加载时保存原始填充和高度，并使用else语句将其应用

$(function(){
    var header = $('#header');
    var padding = $('#header ul li a');
    var headerPosTop = header.offset().top;
    var origHeight = header.height(), 
        origPadding = padding.css("padding");
    var win = $(window);
    win.scroll(function(e){
        var scrollTop = win.scrollTop();
        if(scrollTop >= headerPosTop){
            header.css({height:'60px'});
            padding.css({padding:'17px 12px'});
        }
        else {
            header.css(origHeight);
            padding.css(origPadding);
        }
    });
});

正如Derek在评论中提到的那样，在课堂上翻转通常会比这更好，因为它更容易编写，维护并且可能表现得更好

/* CSS */
heightClass { height:60px; }
paddingClass { padding: 17px 12px; }

/* JS */
$(function(){
    var header = $('#header');
    var padding = $('#header ul li a');
    var headerPosTop = header.offset().top;
    var win = $(window);
    win.scroll(function(e){
        var scrollTop = win.scrollTop();
        if(scrollTop >= headerPosTop){
            header.addClass("heightClass");
            padding.addClass("paddingClass");
        }
        else {
            header.removeClass("heightClass");
            padding.removeClass("paddingClass");
        }
    });
});

如何使用scrollTop切换状态？

1 个答案: