字体大小更改问题

Question

I have a header which changes size on scroll within my website I am coding. However I need to change the font size of the text within the header. I am able to get it to go smaller with the following code. Below that I have the relvant 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'}); }); 

That makes it go smaller just until you refresh

 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; } 

Though if I try to make it so it resets to it's original fontsize (code below) when you scroll back up it messes up the JS and none of the JS on the page works.

 $(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

if you use JS and not CoffeeScript, you need add quotes if { ... } else { ... }

running example https://jsfiddle.net/pmgy9ar2/