How do I make the header increase animation on scroll?

D

dgallyamshin2021-03-25 13:18:12

css

dgallyamshin, 2021-03-25 13:18:12

My header is position: sticky. I want it to not just stick to the page when scrolling the page, but to increase. I want to create an animation to stick to a page.

html:

<html>
    <head>
    </head>
    <body>
        <header></header>
    </body>
</html>

css:

header {
    position: sticky;
    top: 0;
    animation: none;
}


.anima-scale {
    animation: 4s linear 0s infinite alternate menu;
}


@keyframes menu {
    0% { transform: none; }   
    100% { transform: scale(1.2); }
   }

js:

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

I

iminby, 2021-03-26
@iminby

@keyframes , and what does this have to do with it)
Just set the transition block for the block and set the dimensions to more or how exactly you increase it to the style that you cling to when scrolling.
and it will just slowly increase.
Roughly speaking, initially the header height is 50px
when it gets the sticky property, the height becomes 100px
And to make it go smoothly, you just need to add the transition property