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

jsbin demo

$(.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

Popular posts from this blog

python - TypeError: start must be a integer -

c# - DevExpress RepositoryItemComboBox BackColor property ignored -

django - Creating multiple model instances in DRF3 -