<script src="/js_webseite/jquery.js"></script> <style> .content{ font-size:50px; height:1400px; } .header { position: absolute; top: 300px; left: 0px; width: 100%; font-size:55px; background:#123456; color:#fff; z-index: 1000; height: 100px; overflow: hidden; text-align:center; } .header.fest { height: 100px; position:fixed; top:0px; left:0px; } </style> <div class="header"> Header </div> <div class="content"> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lor lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum em ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lor lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum em ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </div> <script> var shrinkHeader = 300; $(window).scroll(function() { var scroll = getCurrentScroll(); if ( scroll >= shrinkHeader ) { $('.header').addClass('fest'); } else { $('.header').removeClass('fest'); } }); function getCurrentScroll() { return window.pageYOffset || document.documentElement.scrollTop; } </script>