javascript - Header Change on Scroll -
on site creating in want put header changes size on scroll. have done 2 methods should in theory have worked. header part of larger document contains js , when tested other js working don't believe major syntax error. when inspect elemented didn't see errors in console.
$(document).on('scroll', function(e) { var value = $(this).scrolltop(); if ( value < 100 ) $("header").css("height", "100px"); else $("header").css("height", "45px"); }); header { height: 300px; background-color: #69d2e7; font-family: 'raleway', sans-serif; z-index: 30; width: 100vw; box-shadow: 1px 1px 10px rgba(40, 40, 40, 0.6); position: fixed; } <header> <a href="index.html"> <h1>meh web design</h1> </a> </header> $(function() { var header = $(".hlarge"); $(window).scroll(function() { var scroll = $(window).scrolltop(); if (scroll >= 200) { header.removeclass('hlarge').addclass("hsmall"); } else { header.removeclass("hsmall").addclass('hlarge'); } }); }); .hlarge { height: 300px; background-color: #69d2e7; font-family: 'raleway', sans-serif; z-index: 30; width: 100vw; box-shadow: 1px 1px 10px rgba(40, 40, 40, 0.6); position: fixed; } .hsmall { height: 150px; background-color: #69d2e7; font-family: 'raleway', sans-serif; z-index: 30; width: 100vw; box-shadow: 1px 1px 10px rgba(40, 40, 40, 0.6); position: fixed; } <header class="hlarge"> <a href="index.html"> <h1>meh web design</h1> </a> </header>
i don't think in either of examples body tall enough scrolling happen.
$(document).on('scroll', function(e) { var value = $(this).scrolltop(); if ( value < 100 ) $("header").css("height", "100px"); else $("header").css("height", "45px"); }); header { height: 300px; background-color: #69d2e7; font-family: 'raleway', sans-serif; z-index: 30; width: 100vw; box-shadow: 1px 1px 10px rgba(40, 40, 40, 0.6); position: fixed; } body { min-height:1000px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <header> <a href="index.html"> <h1>meh web design</h1> </a> </header>
Comments
Post a Comment