CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mechetle
Mechetle

Reputation: 58

When scrolling to top of div hide another div

this is what I have so far:

    $("#main").each(function() {this.scrollTop = this.scrollHeight;

        if ($(this).scrollTop()>0)
         {
            $('#navigation').addClass("nav-hide");
         }
        else
         {
            $('#navigation').addClass("nav-normal");
         }
     });

So basically, I am trying to figure out when you scroll to the top of a div it will hide the navigation bar. So you could read the div without the navigation bar over it. Any ideas? Thanks.

Here's my JSFiddle: https://jsfiddle.net/qb15p5g7/3/

Upvotes: 1

Views: 3486

Answers (3)

Batman
Batman

Reputation: 480

function scrollpos() {
    if (window.scrollY<document.getElementById('header').clientHeight)    {
    document.getElementById('navigation').style.display = 'block';
} else {
    document.getElementById('navigation').style.display = 'none';
}
}
#navigation {
        width: 100%;
        height: 50px;
        background-color: #586e75;
        position: fixed;
        z-index: 1000;
        transition: transform 200ms ease;
    }
    
    header,
    section {
        height: 100vh;
        width: 100%;
        position: static;
    }
    
    header {
        background: #4f4244;
    }
    
    section {
        background: #222222;
    }
    
    .nav-normal {
        transform: translateY(0%);
    }
    
    .nav-hide {
        transform: translateY(-100%);
    }
<body onscroll="scrollpos()">
        <div id="navigation"></div>
        <header id="header"></header>
        <section id="main"></section>
</body>

do u need something like this?@Steboney

Upvotes: 1

Steve K
Steve K

Reputation: 9055

You need to use jquery's window scroll function and not each function unless you are going to have more than one section that you need to hide the navigation on there is no reason to use each and I'm assuming that you don't because you are using an id for #main and Id's are supposed to be unique. Also you don't need to add more than one class you can just add the class and remove the class. So if im correct in assuming that you don't have more than one section that you need to hide the nav in multiple instances on your page then your code should look something like this: 

$(window).scroll(function() {
  if ($(this).scrollTop() >= $('#main').offset().top) {
    $('#navigation').addClass("nav-hide");
  }else {
    $('#navigation').removeClass("nav-hide");
  }
});

And you will just add the nav-hide class and then remove it when scrolling back up.

Here is a fiddle of this working JSFiddle Demo

I assume this is what you are looking for if not let me know so I can edit my answer.

Upvotes: 1

Maxwelll
Maxwelll

Reputation: 2212

The $(window).scroll() method executes on scroll change of the window. You can use it to hide your #navigation id selector

$(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
        $('#navigation').fadeIn();
    } else {
        $('#navigation').fadeOut();
    }
});​

JSFiddle here

See the jQuery documentation for .scroll() here

Upvotes: 1

Related Questions