Question

我有一个标题，可以在我编码的网站上滚动更改大小。但是，我需要更改标题中文本的字体大小。我可以使用以下代码将其缩小。下面我有相关的CSS。

$(document).on('scroll', function(e) {
    var value = $(this).scrollTop();
    if ( value < 100 )
        $("header").css("height", "100px");
    else
        $("header").css("height", "55px");
        $('h1').css({'font-size' : '30px'});
});

这使得它在你刷新

之前变得更小

h1 {
    font-size: 75px;
    width: 100vw;
    color: #212121;
    padding-top: 2vh;
    font-family: 'Raleway', sans-serif;
    padding-left: 1vw;
    font-weight: 300;
    z-index: 30;
}

虽然如果我尝试将其重置为原始的fontsize（下面的代码），当你向后滚动它会弄乱JS并且页面上的JS都没有工作。

$(document).on('scroll', function(e) {
    var value = $(this).scrollTop();
    if ( value < 100 )
        $("header").css("height", "100px");
        $('h1').css({'font-size' : '75px'});
    else
        $("header").css("height", "55px");
        $('h1').css({'font-size' : '30px'});
});

Answer 1

如果您使用JS而非CoffeeScript，则需要添加引号if { ... } else { ... }

运行示例https://jsfiddle.net/pmgy9ar2/

字体大小更改问题

1 个答案: