CODEWITHSUNDEEP
javascriptjqueryhtmlcss
DarkReaperRising
DarkReaperRising

Reputation: 41

Header Change on Scroll

On a site I am creating in which I want to put a header that changes size on scroll. I have done 2 methods which should in theory have worked. This header is part of a larger document which contains JS and when I tested the other JS was working so I don't believe is a major syntax error. Also when I inspect elemented it I didn't see any errors in the console.

$(document).on('scroll', function(e) {
    var value = $(this).scrollTop();
    if ( value < 100 )
        $("header").css("height", "100px");
    else
        $("header").css("height", "45px");
});
header {
    height: 300px;
    background-color: #69D2E7;
    font-family: 'Raleway', sans-serif;
    z-index: 30;
    width: 100vw;
    box-shadow: 1px 1px 10px rgba(40, 40, 40, 0.6);
    position: fixed;
}
  <header>
    <a href="index.html">
      <h1>MEH Web Design</h1>
    </a>
  </header>
Another method I attempted to do that also did not work was:

$(function() {
    var header = $(".hlarge");
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();
    
        if (scroll >= 200) {
            header.removeClass('hlarge').addClass("hsmall");
        } else {
            header.removeClass("hsmall").addClass('hlarge');
        }
    });
});
.hlarge {
    height: 300px;
    background-color: #69D2E7;
    font-family: 'Raleway', sans-serif;
    z-index: 30;
    width: 100vw;
    box-shadow: 1px 1px 10px rgba(40, 40, 40, 0.6);
    position: fixed;
}
.hsmall {
    height: 150px;
    background-color: #69D2E7;
    font-family: 'Raleway', sans-serif;
    z-index: 30;
    width: 100vw;
    box-shadow: 1px 1px 10px rgba(40, 40, 40, 0.6);
    position: fixed;
}
  
  <header class="hlarge">
  <a href="index.html">
   <h1>MEH Web Design</h1>
  </a>
  </header>
During the second one the JS wouldn't even change the class

Upvotes: 0

Views: 224

Answers (2)

Ketzak
Ketzak

Reputation: 628

Your code works, but the page appears to be too short to actually require scrolling, which you need in order to trigger the scroll event. Even once it's triggered, $.scrollTop() returns the pixel height of the section of page above the viewport, so you have to have your page be at least 100 pixels taller than your viewport to get the effect you want. Try adding more content to the page or setting a minimum height larger than your viewport on your document body.

$(document).on('scroll', function(e) {
    var value = $(this).scrollTop();
    if ( value < 100 )
        $("header").css("height", "100px");
    else
        $("header").css("height", "45px");
});
body{
  min-height: 1000px
}
header {
    height: 300px;
    background-color: #69D2E7;
    font-family: 'Raleway', sans-serif;
    z-index: 30;
    width: 100vw;
    box-shadow: 1px 1px 10px rgba(40, 40, 40, 0.6);
    position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <a href="index.html">
    <h1>MEH Web Design</h1>
  </a>
</header>

Upvotes: 1

Taplar
Taplar

Reputation: 24965

I don't think in either of your examples was the body tall enough for scrolling to happen.

$(document).on('scroll', function(e) {
    var value = $(this).scrollTop();
    if ( value < 100 )
        $("header").css("height", "100px");
    else
        $("header").css("height", "45px");
});
header {
    height: 300px;
    background-color: #69D2E7;
    font-family: 'Raleway', sans-serif;
    z-index: 30;
    width: 100vw;
    box-shadow: 1px 1px 10px rgba(40, 40, 40, 0.6);
    position: fixed;
}

body {
  min-height:1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
    <a href="index.html">
      <h1>MEH Web Design</h1>
    </a>
  </header>

Upvotes: 2

Related Questions