<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Resizing Fixed Header</title> <style type="text/css"> body { height: 1000px; background: url(https://www.brainpickings.org/wp-content/themes/brainpickings/images/bckgd_body.png); } .offset { margin-top: 0; padding-top: 200px; text-align: center; } .header { position: fixed; width: 100%; height: 170px; font-weight: bold; text-align: center; background: gold; -webkit-transition: .3s; transition: .3s; } .header.small { height: 70px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); } .header.small .header_logo { padding-top: 20px; font-size: 20px; } .header_logo { font-family: 'Oswald', helvetiva; margin: 0; padding-top: 50px; font-size: 50px; -webkit-transition: .3s; transition: .3s; } </style> </head> <body> <div class="header"> <h1 class="header_logo">Resizing Fixed Header</h1> </div> <div class="offset"> <p>Scroll down to initiate resizing of the page header.</p> </div> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> $(document).scroll(function() { navbarScroll(); }); function navbarScroll() { var y = window.scrollY; if ( y > 10) { $('.header').addClass('small'); } else if (y < 10) { $('.header').removeClass('small'); } } </script> </body> </html> 提示:你可以先修改部分代码再运行。 转载请注明:有爱前端 » 动态头部 喜欢 (2)or分享 (0)