oliviervbs Posted December 29, 2015 Share Posted December 29, 2015 so i am new to js and i made myself a sticky nav with the help of a guide but i tried to apply it on to the image in the nav as well to make it have a opacity of 0 or 1 whenever it hits the top of my browser window in chrome it adds the class and removes it but the img just stays hidden i don't know why the sticky nave works fine but the css just wont adjust on the img http://pastebin.com/ELNQdwWF Link to comment Share on other sites More sharing options...
dsonesuk Posted December 29, 2015 Share Posted December 29, 2015 Which is it? A selector that targets nav element with child img, element with nav class with child img. You seem to be targeting one or the other in css and js. Link to comment Share on other sites More sharing options...
john_jack Posted December 29, 2015 Share Posted December 29, 2015 First of all take a look here http://www.w3schools.com/jquery/jquery_selectors.asp i tried this and it works . <html> <head> <style> .nav{ display: block; width: 10%; float: left; margin-left: 6.25%; margin-top:-10px; opacity: 0; } .vis{ opacity: 1; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </head> <div style="width:100%"> <img src="skit/images/example/002.jpg" class="nav" id="img1"/> <br /> </div> <div id="of"></div> <script> jQuery(document).ready(function () { var navOffset = jQuery("#of").offset().top; jQuery(window).scroll(function () { var scrollPos = jQuery(window).scrollTop(); //alert(scrollPos); $("#of").html("nav :" + navOffset +"scroll :"+scrollPos); if (scrollPos >= navOffset) { jQuery("#img1").addClass("vis"); jQuery("#img1").removeClass("nav"); } else { jQuery("#img1").removeClass("vis"); jQuery("#img1").addClass("nav"); } }); }); </script> okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok</br>okok Link to comment Share on other sites More sharing options...
dsonesuk Posted December 29, 2015 Share Posted December 29, 2015 Its more than likely to do with precedence '.nav img' with '.nav' proceeding the img tag it has a higher precedence than '.vis' on its own, while '.nav .vis' or '.nav img.vis' would give it a higher precedence over '.nav img'. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now