CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Brr Switch
Brr Switch

Reputation: 984

Shrink header as the user scrolls down

I'm a newbee to bootstrap/web designing. Can anyone help me how to shrink a header and the logo in the header as the user scrolls down???

Exactly like this https://www.metlife.com/products/index.html

I have a header component.

This is how my header looks like. (JSX)

<div className="header">
  <Row id="SalesHeader">
    <Col xs={12}>
      <a id="HomeLink">
        <Image src={require( './icon_home.png')} alt="home" />Home
      </a>
      <div id="ContactLink" className="hidden-xs">
        {contactArea}
      </div>
    </Col>
  </Row>
</div>

Thank you!!

Upvotes: 1

Views: 849

Answers (3)

Iqbal Pasha
Iqbal Pasha

Reputation: 1316

try with this it may help to create bootstrap template.

$(window).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('nav').addClass('shrink');
  } else {
    $('nav').removeClass('shrink');
  }
});
body {
  padding-top: 50px;
}

nav a {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  font-size: 18px;
}

nav .navbar-toggle {
  margin: 13px 15px 13px 0;
}

.navbar-brand {
  font-size: 30px;
}



nav.navbar.shrink {
  min-height: 35px;
}

nav.shrink a {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  font-size: 15px;
}

nav.shrink .navbar-brand {
  font-size: 25px;
}

nav.shrink .navbar-toggle {
  padding: 4px 5px;
  margin: 8px 15px 8px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>



<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav pull-right">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

<div class="container">
  
  <div class="text-center">
    <h1>Bootstrap starter</h1>
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>
  <div class="text-center">
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>
   <div class="text-center">
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>
   <div class="text-center">
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>
   <div class="text-center">
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>
   <div class="text-center">
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>
   <div class="text-center">
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>
  
</div>

Upvotes: 1

Kapil
Kapil

Reputation: 1141

Try to this javascript and write css as you need height of header

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

} window.onload = init();

css

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

Upvotes: 1

Gautam Jha
Gautam Jha

Reputation: 1473

All you need to add a class on scroll that have some css at id="SalesHeader" just try to implement this code. i am using this code is 100% working

CSS

.fixedHeader {
    height: 20px;
    -webkit-transition: height 500ms ease 0s;
    transition: height 500ms ease 0s;
}

SCRIPT TO ADD fixedHeader on scroll

<script>
    $(window).scroll(function(){
      var sticky = $('#yourID'),
          scroll = $(window).scrollTop();

      if (scroll >= 100) 
      {
      sticky.addClass('fixedHeader');

      }
      else 
      { 
      sticky.removeClass('fixedHeader');

      }
      });
</script>

Upvotes: 2

Related Questions