Jquery - Sticky Header That Shrinks When Scrolling Down

jQuery - Sticky header that shrinks when scrolling down

This should be what you are looking for using jQuery.

$(function(){
  $('#header_nav').data('size','big');
});

$(window).scroll(function(){
  if($(document).scrollTop() > 0)
{
    if($('#header_nav').data('size') == 'big')
    {
        $('#header_nav').data('size','small');
        $('#header_nav').stop().animate({
            height:'40px'
        },600);
    }
}
else
  {
    if($('#header_nav').data('size') == 'small')
      {
        $('#header_nav').data('size','big');
        $('#header_nav').stop().animate({
            height:'100px'
        },600);
      }  
  }
});

Demonstration:
http://jsfiddle.net/jezzipin/JJ8Jc/

Shrinking sticky sticky header causes flicker in Blink/Webkit at certain scroll positions

Well, that was a surprisngly obvious solution... Thanks to this answer, I was able to figure out that if I just set a fixed height on the sticky element, but let the contents of that element shrink, the issue goes away.

Essentially:

<div class="sticky-block" style="height:140px;">
    <div class="header-block">
        ...
    </div>
    <div class="navigation-block">
        ...
    </div>
</div>

Shrinking header when scrolling down in jquery

   $(window).scroll(function(){
          var scrolltop = $(this).scrollTop();
           if(scrolltop >=100){
                $('#pre-header,#id-of-your-logo').css('display','none');
           }
           else{
                $('#pre-header,#id-of-your-logo').css('display','block');
           }

Hope this helps..

How to stop shrinking effect on header on scroll?

In the CSS you will find a class called top-nav-collapse, this is currently being set when the page is scrolled and has a padding property which is what is causing the shrinking effect. Remove this padding and your problem is solved:

.navbar-custom.top-nav-collapse {
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    background: #000;
}

Here is an update to your codepen example

Shrink header on scroll and move content below synchronously

This is because when the user scrolls down at the first instance (to trigger your animation) you are letting them continue scrolling, and then applying the position:fixed; to your header.. which is making it 'jump' down the page.

The solution, is actually something you have tried already; to start with the header already position:fixed, and then animate from there.

By applying fixed to the header to begin with, the other elements wont appear to 'snap' later.

I found that adding the 'arrow' element into the header stops the noticeable snapping (and i assume you intended this to be there all the time).

JSFIDDLE DEMO

---

CSS

body {
    text-align: center;
}
.clear {
    clear: both;
}
h1 {
    margin-top: 4px;
}
h1 p {
    font-size: 18px;
    margin: 5px 0 10px 0;
}
h2 {
    margin-bottom: 50px;
}
h1, h2, h3, h4 {
    text-align: center;
}
.white, .white * {
    background-color: #ffffff;
    border-color: #2d2d2d;
    color: #2d2d2d;
}
.dark, .dark * {
    background-color: #2d2d2d;
    border-color: #ffffff;
    color: #ffffff;
}
#top {
    top: 0;
    text-align: center;
    width: 100%;
    position:fixed;
    overflow: visible !important;
    z-index: 1000;
}
#top .arrow{
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top-width: 20px;
    border-top-style: solid;
    border-top-color:white;
    height: 20px;
    margin: 0 0 0 -30px;
    width: 60px;
    position:absolute;
    top:100%;
    left:50%;
    background-color:transparent;
}
#top p.slogan {
    font-family:'Poiret One', cursive;
    margin-top: 50px;
    font-size: 20px;
}
#top a {
    display: block;
    font-family:'Poiret One', cursive;
    font-size: 20px;
    text-align: center;
    width: 117px;
}
#top a:hover {
    color: #767676;
    text-decoration: none;
}
#top nav {
    float: right;
    left: -50%;
    margin-top: 35px;
    position: relative;
    text-align: left;
}
#top ul {
    left: 50%;
    margin: 0 auto;
    padding: 0;
    position: relative;
}
#top li {
    float: left;
    margin: 0 5px;
    position: relative;
    width: 100px;
}
#contact {
    padding-top:215px;
    height: 1300px;
}

JS

$( document ).ready(function() {
    changeHeaderHeight();
    var lastScrollTop = 0;
    var isAnimationFinished = true;
    var isScrolled = $(window).scroll(function() {
        var scrollTop = $(this).scrollTop();
        if (isAnimationFinished == true) {
            isAnimationFinished = false;
            topHeight = $('#top').height() - scrollTop;
            $('#top h1').animate({
                fontSize: '14px'
            },500);
            $('#top h1 p').fadeOut();
            $('#top p.slogan').fadeOut();
            $('#top').animate({
                height: 165 + 'px'
            },1000);
            $('#main-navigation').animate({
                marginTop: 5 + 'px',
            },1000);
            $('#main-navigation a').animate({
                width: '97px',
                fontSize: '16px',
            },1000);
            $('#main-navigation li').animate({
                width: '97px'
            },1000);
        }
        lastScrollTop = scrollTop;
    });
    $.when(isScrolled).then(function() {
        if ($('#top').height() == 165) {
            isAnimationFinished = true;

        }
    });

});
$(window).resize(function() {
    changeHeaderHeight();
});
function changeHeaderHeight() {
    var viewportHeight = $(window).height();
    $('header#top').height(viewportHeight);
}

HTML

<body data-spy="scroll" data-target="#main-navigation">
  <header id="top" class="white">
    <h1>
      Title
      <p>
        ...slogan goes here
      </p>
    </h1>
    <nav id="main-navigation">
      <ul data-spy="affix" data-offset-top="155" class="nav">
        <li>
          <a href="#news" title="News">
            News
          </a>
        </li>
        <li>
          <a href="#agency" title="Agentur">
            Agentur
          </a>
        </li>
        <li>
          <a href="#services" title="Leistungen">
            Leistungen
          </a>
        </li>
        <li>
          <a href="#portfolio" title="News">
            Portfolio
          </a>
        </li>
        <li>
          <a href="#contact" title="News">
            Kontakt
          </a>
        </li>
      </ul>
    </nav>
    <div class="clear"></div>
    <p class="slogan">
      Blabla
    </p>
    <p class="slogan">
      More Blabla
    </p>
    <div class="arrow">
    </div>
  </header>
  <section id="contact" class="dark">
    <header>
      <h2>
        Contact
      </h2>
    </header>
  </section>
  <footer class="white">
    <a class="scroll-top" href="#top">
      Logo
    </a>
  </footer>
</body>

How to fix a header on scroll

You need some JS to do scroll events. The best way to do this is to set a new CSS class for the fixed position that will get assigned to the relevant div when scrolling goes past a certain point.

HTML

<div class="sticky"></div>

CSS

.fixed {
    position: fixed;
    top:0; left:0;
    width: 100%; }

jQuery

$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

Example fiddle: http://jsfiddle.net/gxRC9/501/

---

EDIT: Extended example

If the trigger point is unknown but should be whenever the sticky element reaches the top of the screen, offset().top can be used.

var stickyOffset = $('.sticky').offset().top;

$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

  if (scroll >= stickyOffset) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

Extended example fiddle: http://jsfiddle.net/gxRC9/502/

---

Related Topics