CODEWITHSUNDEEP
javascriptjquery
JkenGJ
JkenGJ

Reputation: 35

show different header on scroll then hide it when scrolled to the top javascript/JQuery

This is driving me insane because i had it working and now it's not, i have 2 headers and when the page loads i want one to be hidden which is easy enough then as soon as the user scrolls i want the other header to show over it and then when they scroll back to the top the original header shows.

i think there is an issue with the window.pageyoffset because what ever i put inside this if statement it doesn't execute..

<script>

    var secondHeader = $('.headerN').hide();

    function testScroll(){
        if(window.pageYOffset>50){
            secondHeader.fadeIn();
        }
        else if(window.pageYOffset == 0){
            secondHeader.fadeOut();
        }
    }
    window.onscroll=testScroll;

Upvotes: 0

Views: 1514

Answers (2)

hityagi
hityagi

Reputation: 5256

This is what you need:

$("#header-scroll").hide();
$(window).scroll(function() {
  if ($(this).scrollTop() > 10) {
    $('#header-scroll').slideDown(500);
    $('#header-full').slideUp(500);
  } else {
    $('#header-scroll').slideUp(500);
    $('#header-full').slideDown(500);
  }
});
.header {
  border: 2px #3a3a3a solid;
  width: 97%;
  position: fixed;
  text-align:center;
  color: #3a3a3a;
  top: 0px;
}
#header-full {
  height: 100px;
  background-color: #FFF056;
  font-size:72px;
}
#header-scroll {
  height: 50px;
  background-color: #CBE32D;
  font-size:28px;
}
#content {
  height: 600px;
  width: 97%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header-full" class="header">
  Full Header
</div>
<div id="header-scroll" class="header">
  Scroll Header
</div>
<div id="content"></div>

Upvotes: 1

Prateek Deshmukh
Prateek Deshmukh

Reputation: 135

Try using below code.

$(window).scroll(function () {

            if ($(this).scrollTop() > 50) {

                $('.headerN').fadeIn();
            } else {
                $('.headerN').fadeOut();
            }
});

Upvotes: 0

Related Questions