javascript - Header Change on Scroll -


on site creating in want put header changes size on scroll. have done 2 methods should in theory have worked. header part of larger document contains js , when tested other js working don't believe major syntax error. when inspect elemented didn't see errors in 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>
method attempted 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 second 1 js wouldn't change class

i don't think in either of examples body tall enough scrolling 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>


Comments

Popular posts from this blog

how to insert data php javascript mysql with multiple array session 2 -

multithreading - Exception in Application constructor -

windows - CertCreateCertificateContext returns CRYPT_E_ASN1_BADTAG / 8009310b -