Jump to content

help a js noobie with a sticky nav


oliviervbs
 Share

Recommended Posts

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...