javascript - Font-Size Change Problems -
i have header changes size on scroll within website coding. need change font size of text within header. able go smaller following code. below have 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'}); }); 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 try make resets it's original fontsize (code below) when scroll messes js , none of js on 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'}); });
if use js , not coffeescript, need add quotes if { ... } else { ... }
running example https://jsfiddle.net/pmgy9ar2/
Comments
Post a Comment