Fixed Header in CSS for Conditional Scroll Down

Fixed header in CSS for conditional scroll down?

Yes. You can do it with just CSS. This is done by having a normal scrolling header, placed above a fixed one, which shows up only after the normal one scrolls up above it. This is kind of how http://techcrunch.com is doing it.

Update [10/31/2013] - Techcrunch changed their UI recently so you cannot see this there anymore!

Check this demo: http://jsfiddle.net/WDnyb/2/

HTML

<div class="header">Header</div>
<div class="outer">
    <span class="banner">LOGO</span>
    <div class="header">Header</div>
</div>
<div class="content">Content</div>

Relevant CSS

.header {
    width: 100%;
    position: fixed;
    top: 0;
    bottom: auto;
}
.outer {
    position: relative;
    height: 100px;
}
.outer .header {
    position: absolute;
    bottom: 0;
    z-index: 2;
    top: auto;
}
.content {
    height: 1500px;
    margin-top: 100px;
}

Sticky Header after scrolling down

Here's a start. Basically, we copy the header on load, and then check (using .scrollTop() or window.scrollY) to see when the user scrolls beyond a point (e.g. 200pixels). Then we simply toggle a class (in this case .down) which moves the original into view.

Lastly all we need to do is apply a transition: top 0.2s ease-in to our clone, so that when it's in the .down state it slides into view. Dunked does it better, but with a little playing around it's easy to configure

CSS

header {
  position: relative;
  width: 100%;
  height: 60px;
}

header.clone {
  position: fixed;
  top: -65px;
  left: 0;
  right: 0;
  z-index: 999;
  transition: 0.2s top cubic-bezier(.3,.73,.3,.74);
}

body.down header.clone {
  top: 0;
}

either Vanilla JS (polyfill as required)

var sticky = {
  sticky_after: 200,
  init: function() {
    this.header = document.getElementsByTagName("header")[0];
    this.clone = this.header.cloneNode(true);
    this.clone.classList.add("clone");
    this.header.insertBefore(this.clone);
    this.scroll();
    this.events();
  },

  scroll: function() {
    if(window.scrollY > this.sticky_after) {
      document.body.classList.add("down");
    }
    else {
      document.body.classList.remove("down");
    }
  },

  events: function() {
    window.addEventListener("scroll", this.scroll.bind(this));
  }
};

document.addEventListener("DOMContentLoaded", sticky.init.bind(sticky));

or jQuery

$(document).ready(function() {
  var $header = $("header"),
      $clone = $header.before($header.clone().addClass("clone"));

  $(window).on("scroll", function() {
    var fromTop = $("body").scrollTop();
    $('body').toggleClass("down", (fromTop > 200));
  });
});

---

Newer Reflections

Whilst the above answers the OP's original question of "How does Dunked achieve this effect?", I wouldn't recommend this approach. For starters, copying the entire top navigation could be pretty costly, and there's no real reason why we can't use the original (with a little bit of work).

Furthermore, Paul Irish and others, have written about how animating with translate() is better than animating with top. Not only is it more performant, but it also means that you don't need to know the exact height of your element. The above solution would be modified with the following (See JSFiddle):

header.clone {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%);
  transition: 0.2s transform cubic-bezier(.3,.73,.3,.74);
}

body.down header.clone {
  transform: translateY(0);
}

The only drawback with using transforms is, that whilst browser support is pretty good, you'll probably want to add vendor prefixed versions to maximize compatibility.

CSS Flexible Sticky Header which may Grow and Pushes Below Items Down

It will get resolved if you change the position property.

Change it to sticky: position:sticky

Sticky header doesn't scroll all the way back up (overlaps div below)

The condition should be tested as window.pageYOffset > sticky instead of window.pageYOffset >= sticky inside the window scroll function...

https://www.codeply.com/go/Qm2vXNiCvh

        

// When the user scrolls the page, execute myFunction 

window.onscroll = function() {myFunction()};

// Get the header

var header = document.getElementById("myHeader");

// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position

function myFunction() {

  // Get the offset position of the navbar

  var sticky = header.offsetTop;

  if (window.pageYOffset > sticky)

  {

    header.classList.add("sticky");

  } else {

    header.classList.remove("sticky");

  }

}

.header {

  padding: 10px 16px;

  background: #1919ff;

  color: #f1f1f1;

}

.sticky {

  position: fixed;

  top: 0;

  width: 100%;

}

#about {

  background-color: #ccccff;

  height: 400px;

  width: 67%;

  margin: auto;

  box-sizing: border-box;

}

.round-border{

   border-radius: 50%;

  }

.portrait-image{

    width: 25%;    

  }

.header-bar{

    height: 4px;

    width: 80%;

    background: #272C31;

    margin-left: 20%;

    margin-top: 3%;

}

#image-position {

  float: right;

  margin: 8% 6% 0 0;

}

#text {

  float: left;

  text-align: right;

  width: 57%;

  word-break: break-all;

  margin-top: 11%;

  margin-left: 7%;

}

p.medium {

    font-size:135%;

    line-height: 1.5;

}

.clearfix {

  overflow: auto;

}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style type="text/css"> .icon {background:none;} </style>

<body style="background-color: #5D6D7E;">

  <div class="header" id="myHeader">

    <h2>          xxxxxxxxx</h2>

  </div>

  <div id="about" class="clearfix">

    <div id="text">

      <p class="medium">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br/>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>

      <br/>

      <div class="header-bar"></div>

      <br/>

      <br/>

      <h4 style="font-size:150%;">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h4>

    </div>

    <img class="portrait-image round-border" id="image-position" src="http://abload.de/img/gpuxh.png" alt="portrait">

  </div>

  

</body>

Change header CSS upon scrolling down

It's not possible via CSS alone since CSS cannot select the scroll top. It's very easy to do via javascript, though.

$(window).on("scroll", function () {
    if ($(this).scrollTop() > 100) {
        $("#header").addClass("not-transparent");
    }
    else {
        $("#header").removeClass("not-transparent");
    }
});

How to make the middle element stick when scrolled down

Use jQuery and calculate the height of previous div or you could use CSS position:sticky as below,

Sticky positioning is a hybrid of relative and fixed positioning. The
element is treated as relative positioned until it crosses a specified
threshold, at which point it is treated as fixed positioned.

You must specify a threshold with at least one of top, right, bottom,
or left for sticky positioning to behave as expected.

#summary {

  width: 100%;

  height: 300px;

  background: #ccc;

}

#header {

  width: 100%;

  height: 60px;

  background: #fcc;

  position: sticky;

  top: 10px;

}

#scroll-list {

  height: 800px;

  background: #cc1;

}

<div id="summary">Summary</div>

<div id="header">Header</div>

<ul id="scroll-list"></ul>

---

Related Topics