javascript - change colour of header when scroll -
i'm going cut chase straight away, want header go transparent (no background attribute in css) having background-color
of white on scroll.
i using javascript , not getting anywhere.
$(window).scroll(function() { var changenav = 'rgba(0, 0, 0, 0.36)' if ($(window).scrolltop() > 200) { changenav = '#ffffff'; } $(.header).css('background-color', changenav); });
also, there way can make go on itself? @ bottom of page , header has background-color
of white, when scoll top, javascript takes attribute out? have been playing , searching couldn't find anything.
note: had gotten piece of javascript place on stack overflow, here
thank much
$(.header)
should $(".header")
also script can "simplified" to:
$(window).scroll(function() { var scrolled = $(this).scrolltop() > 200; $(".header").css('background-color', scrolled ? '#fff' : "rgba(0, 0, 0, 0.36)"); });
note above force .header
background color change (even #fff #fff) on every scroll. leverage that , make sure have right colors if user resizes window use:
$( function () { // dom ready manipulated var $header = $(".header"); // cache elements intensive actions $(window).on("scroll resize", function() { if($(this).scrolltop() > 200){ $header.css('background-color', "#fff" ); }else{ $header.css('background-color', "rgba(0, 0, 0, 0.36)" ); } }); });
ofc, make sue you've included jquery library inside <head>
of document:
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
Comments
Post a Comment