Multiple Sticky Headers - CSS / JavaScript / AngularJS

Question

I tried to find some solution for the following scenario:

Header height is all different
Mouse scroll down
Fixed headers

Does anyone know how to make multiple sticky headers like this?

(1) init

enter image description here

(2) scroll down (using mouse)

enter image description here

(3) scroll down (using mouse)

enter image description here

What do you want to achieve in the end? Is there any special reason why you can't use position: fixed with different top attributes? — user900362
– user900362, Commented Apr 9, 2015 at 5:17
I tried to like this, but it not fixed header A, B, C... Multiple Sticky Headers — Keisuke KATO
– Keisuke KATO, Commented Apr 9, 2015 at 5:35
And when you click on a header, the content below is displayed? What's the behaviour of it? — user900362
– user900362, Commented Apr 9, 2015 at 5:37

Keisuke KATO · Accepted Answer · 2015-04-10 20:05:51Z

hmm...

DEMO

$(window).scroll(function() {
  var $headers = $(".header");
  var scrollTop = $(this).scrollTop();

  if (scrollTop <= 0) {
    // reset all
    $headers.css({
      position: "relative",
      top: "0px"
    });
  } else {
    $headers.each(function(index, $el) {

      var $curHeader = $($headers).eq(index);
      var curTop = $curHeader.offset().top;
      var curHeight = $curHeader.height();

      // scroll up
      var isRelative = ($el.isFixed && scrollTop <= $el.exTop);

      // scroll down
      var isFixed = (curTop <= scrollTop);

      var position = "";
      var top = 0;

      if (isRelative) {
        // reset
        positon = "relative";
        top = 0;

        $el.isFixed = false;
      } else if (isFixed) {
        position = "fixed";
        if (0 < index) {
          for (var i = 0; i < index; i++) {
            top += $($headers).eq(i).height();
          }
        }
        scrollTop += curHeight;

        if (!$el.isFixed) {
          $el.isFixed = true;
          $el.exTop = curTop;
        }
      }

      $($el).css({
        position: position,
        top: top + "px"
      });
    });
  }
});

body {
  height: 10000px;
}
div {
  height: 200px;
  background: gray;
  width: 100%;
}

.header {
  height: 50px;
  background: green;
}

div.header:nth-child(7) {
  height: 100px;
}

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>

<body>
    <div>content 0</div>
    <div class="header">header 1</div>
    <div>content 1</div>
    <div class="header">header 2</div>
    <div>content 2</div>
    <div class="header">header 3</div>
    <div>content 3</div>
</body>

</html>

mohamedrias · Accepted Answer · 2015-04-09 06:44:43Z

1

Here is a simple example:

I'm calculating the height of the headers and setting the top property.

DEMO

  $(window).scroll(function () {
var $headers = $(".header");
if ($(this).scrollTop() > 50) {
    $headers.each(function (index, el) {
        var height = 0;
        if (index == 0) {
            height = "0px";
        } else {
            for ( var x = index - 1; x >= 0; x--) {
                height += $headers.eq(x).height();
            }
        }
        height = height + "px";
        $(el).css({
            "position": "fixed",
                "top": height
        });
    });
} else {
    $headers.css({
        position: "relative",
        top: "0"
    });
}
});

body {
  height: 10000px;
}
div {
  height: 100px;
  background: green;
  width: 100%;
}

.header {
  height: 50px;
  background: red;
}
.header:first-child {
  height: 20px;
}
div.header:nth-child(5) {
  height: 100px;
}

<!DOCTYPE html>
<html>

<head>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>

<body>
    <div class="header">header 1</div>
    <div>content 1</div>
    <div class="header">header 2</div>
    <div>content 2</div>
    <div class="header">header 3</div>
    <div>content 3</div>
</body>

</html>

edited Apr 9, 2015 at 6:44

answered Apr 9, 2015 at 5:50

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

1 Comment

Davbog Over a year ago

Yours all appear to collapse/sticky together at once. They are supposed to happen one at a time when each header hits the next one.

Danish Ali · Accepted Answer · 2023-01-18 10:47:45Z

With only css Codepen-FollowMe Headers

body {
  margin:0;
  min-height:200vh;
  border:2px solid;
}
.first {
  height:50px;
  background:red;
  height: 10rem;
}

.second {
  height:50px;
  background:blue;
  height: 10rem;
  
}
.third {
  height:50px;
  background:green;
  height: 10rem;
  
}

.stickyContainer {
  .sticky {
    position: sticky;
    top: 0;
    height: 2rem;
    background: white;
  }
}

<div class="first stickyContainer">
  <div class="sticky"><h1>1</h1></div>
  <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
  </div>
<div class="second stickyContainer">
  <div class="sticky"><h1>2</h1></div>
  <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>

<div class="third stickyContainer">
  <div class="sticky"><h1>3</h1></div>
  <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>

Collectives™ on Stack Overflow

Multiple Sticky Headers - CSS / JavaScript / AngularJS

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related