javascript - Facing no live responce on change of class of a div element on scrolling with jquery -
i have had read many answers here , tried apply them not working in case. can't find going wrong following code (it example of problem facing):-
var header = $(".top-navigation"); $(window).scroll(function() { var scroll = $(window).scrolltop(); if (scroll >= 100) { header.addclass("top-navigtion1").removeclass("top-navigation"); } else { header.removeclass("top-navigation1").addclass("top-navigation"; } });
.container { width: 600px; height: 1500px; background-color: #000000; } .top-navigation { width: 600px; height: 100px; position: fixed; background-color:transparent; z-index: 1501 ; color: #fff; } .top-navigation1 { width: 500px; height: 100px; position:relative; background-color: 'blue'; z-index: 1501; }
<div class="container"> <div class="top-navigation"> <nav> <ul> <li><a href="">home</a></li> <li><a href="">about</a></li> <li><a href="">contact</a></li> </ul> </nav> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
please check if works you. fiddle
code
<header class="clearheader"></header> <div class="wrapper"></div>
css:
.clearheader{ height: 200px; background-color: rgba(107,107,107,0.66); position: fixed; top:200; width: 100%; } .darkheader {height: 100px;} .wrapper { height:2000px; }
jquery:
$(window).scroll(function() { var scroll = $(window).scrolltop(); if (scroll >= 500) { $(".clearheader").addclass("darkheader"); } else { $(".clearheader").removeclass("darkheader"); } });
Comments
Post a Comment