Jump to content

help a js noobie with a sticky nav


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


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 .

    display: block;
    width: 10%;  
    float: left;
    margin-left: 6.25%;
    opacity: 0;
    opacity: 1;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div style="width:100%">
<img src="skit/images/example/002.jpg" class="nav" id="img1"/>
<br />

<div id="of"></div>

jQuery(document).ready(function () {
    var navOffset = jQuery("#of").offset().top;
    jQuery(window).scroll(function () {
        var scrollPos = jQuery(window).scrollTop();
	   $("#of").html("nav :" + navOffset +"scroll :"+scrollPos);
        if (scrollPos >= navOffset) {
        } else {
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

  • Create New...