CODEWITHSUNDEEP
javascriptjqueryhtmlcss
DarkReaperRising
DarkReaperRising

Reputation: 41

Font-Size Change Problems

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

Upvotes: 1

Views: 69

Answers (1)

AHOYAHOY
AHOYAHOY

Reputation: 1847

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

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

Upvotes: 1

Related Questions