CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Daksh B
Daksh B

Reputation: 262

Shrinking fixed header on scroll with a sub header

I was looking for ways to resize (shrink) the header of my site on scroll. Found an example which works good. Working example here on JsFiddle

index

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="" />
<title>Header Resize On Scroll with Animations</title>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,700,400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css" />

<script src="js/classie.js"></script>

<script>
    function init() {
        window.addEventListener('scroll', function(e){
            var distanceY = window.pageYOffset || document.documentElement.scrollTop,
                shrinkOn = 300,
                header = document.querySelector("blk, header");
            if (distanceY > shrinkOn) {
                classie.add(header,"smaller");
            } else {
                if (classie.has(header,"smaller")) {
                    classie.remove(header,"smaller");
                }
            }
        });
    }
    window.onload = init();
</script>
</head>

<body>
<div id="wrapper">

<header>
    <div class="container clearfix">
        <div class="sub-header">
            hi
        </div>
        <h1 id="logo">
            LOGO
        </h1>
        <nav>
            <a href="">Lorem</a>
            <a href="">Ipsum</a>
            <a href="">Dolor</a>
        </nav>
    </div>
</header>
<div id="main">
    <div id="content">
        <section>
            <div class="container">
                <h1>Header Resize On Scroll with Animations</h1>
                <p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
                <p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</p>
                <p>
                    <a href="http://www.callmenick.com/tutorials/create-an-animated-resizing-header-on-scroll">&laquo; Go back to this tutorial?</a><br>
                    <a href="http://www.callmenick.com/tutorials">&laquo; Go back to all tutorials?</a>
                </p>
            </div>
        </section>
    </div>
</div>
</div>
</body>
</html>

css

header {
width:100%;
height:150px;
overflow:hidden;
position:fixed;
top:0;
left:0;
z-index:999;
background-color:#0683c9;
-webkit-transition:height .3s;
-moz-transition:height .3s;
-ms-transition:height .3s;
-o-transition:height .3s;
transition:height .3s;
}

header h1#logo {
display:inline-block;
height:150px;
line-height:150px;
float:left;
font-family:Oswald, sans-serif;
font-size:60px;
color:#FFF;
font-weight:400;
-webkit-transition:all .3s;
-moz-transition:all .3s;
-ms-transition:all .3s;
-o-transition:all .3s;
transition:all .3s;
}

header nav {
display:inline-block;
float:right;
}

header nav a {
line-height:150px;
margin-left:20px;
color:#9fdbfc;
font-weight:700;
font-size:18px;
-webkit-transition:all .3s;
-moz-transition:all .3s;
-ms-transition:all .3s;
-o-transition:all .3s;
transition:all .3s;
}

header nav a:hover {
color:#FFF;
}

header.smaller {
height:75px;
}

header.smaller h1#logo {
width:150px;
height:75px;
line-height:75px;
font-size:30px;
}

header.smaller nav a {
line-height:75px;
}

.sub-header {
background-color:#000;
height:40px;
color:#999;
width:100%;
}

.clearfix:after {
visibility:hidden;
display:block;
content:"";
clear:both;
height:0;
}

and the js

( function( window ) {

'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

function classReg( className ) {
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}

var classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

// transport
if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( classie );
} else {
  // browser global
  window.classie = classie;
}

})( window );

The problem.

What I have is a fixed Header, divided into 2 parts (header and sub header). Like the one below

enter image description here

After adding the sub header to the code above the header shrinks as usual but the sub header (black in color) remains. I want the header to shrink and the sub header to go away on scroll.

I tried a few ways over and over again but just could not get the sub header to go away on scroll

Can anyone of you please suggest how do I get this done.

Upvotes: 0

Views: 854

Answers (2)

Naitro
Naitro

Reputation: 458

you should add style for sub header to change it

.menu {
  background-color: #000;
  height: 40px;
  color: #999;
  width: 100%;
  transition: height .3s;
}

.smaller .menu {
  height: 0;
  overflow: hidden;
}

Upvotes: 0

BluePill
BluePill

Reputation: 515

Consider adjusting your CSS (the smaller class definition), e.g.:

header.smaller {
    height: 5px; /* or even lesser */
}

Working example: https://jsfiddle.net/qc01zwyg/

Edit:

For making the black sub go away, target its CSS under the .smaller selector.

header.smaller {
  height: 75px;
}

header.smaller .menu {
  display: none;
}

Updated example: https://jsfiddle.net/qc01zwyg/2/

Upvotes: 1

Related Questions