How to create an animated sticky header after some scrolling

by Assessor
0 comment

On this tutorial we’ll create a header, because the menu bar proven on the highest, that sticks to the highest of the viewport. The sticky menu bar will animate itself after some scrolling.

Simply wrap the header with Menucool Float Panel, and add a couple of types to your stylesheet. It is so simple as that.

See more: Sticky top with animation

  • Plain JavaScript(4KB). jQuery isn’t required.
  • Cross platform and browser help
  • Utterly FREE to make use of.
  • Hyperlink float-panel.js

    <script src=”float-panel.js”></script>

  • Wrap the header or menu bar with Float Panel

    <div class=”float-panel” data-top=”0″ data-scroll=”200″> <div class=”content-area” fashion=”text-align:proper;”> <a href=”#” fashion=”float:left;”> <i class=”fa fa-gg”></i> <em>MENUCOOL</em> </a> <a href=”#”><i class=”fa fa-tint”></i> Free trial</a> <a href=”#”>Subscribe</a> <a href=”#”>Providers</a> <a href=”#”><i class=”fa fa-search”></i></a> </div> </div>

    • For the demo on the highest we have to add an attribute data-scroll=”(pixel worth)” to the float panel. It tells the script so as to add an additional .mounted class to the float panel when the web page has been scrolled greater than the desired pixels.
    • In case your float panel isn’t the header component that stays on the very high of the web page (such because the vertical menu on the precise), you need not set the data-scroll. The script will use the data-top (the space to the highest of the present seen space of the window. Its default worth is 0 if not set) to find out when to repair the menu.
  • The CSS

    .float-panel { width:100%; background:white; z-index:300; padding:30px 0; remodel: translateZ(0); transition:all 0.5s; } .float-panel .content-area { max-width:900px; margin:10px auto; } .float-panel a { font-size:16px; text-decoration:none; colour:#444; show:inline-block; padding:10px 20px; } .float-panel .fa-gg { colour:#F0595C; font-size:30px; vertical-align:center; transition:all 1s; } Notice: Font Superior can be used on this demo to fashion the icons:<hyperlink rel=”stylesheet” href=””>

  • The CSS3 animation

    Editor’s Choice: The best anime of 2022 to watch, so far – Polygon

    When scrolled greater than the pixels specified by the data-scroll attribute, one other class mounted can be added to the Float Panel. So we will use the .mounted selector so as to add animated results to the weather within the panel. For instance:

    /* Float Panel: class=”float-panel mounted” */ .mounted { box-shadow:0 2px 6px rgba(0,0,0,0.2); padding:4px 0; animation:slide-down 0.7s; opacity:0.9; } .mounted .fa-gg { remodel: rotate(360deg); } @keyframes slide-down { 0% { opacity: 0; remodel: translateY(-100%); } 100% { opacity: 0.9; remodel: translateY(0); } }

    • CSS3 transition and remodel properties are properly supported by all trendy browsers (now we do not even want the -webkit- prefix), and it’ll degrade properly with legacy browsers similar to IE6 – IE9.

We’re completed! For particulars please view the supply code of demo2.html within the obtain package deal.

Editor’s Choice: All Time Worldwide Animated Box Office

Related Posts

Leave a Comment