Dynamically positioning element on scroll

Question

Goal

To have the page navigation positioned lower on the page when initially loaded. So that it looks like pictured below.

Background

I created a navigational element that is using Headroom.js to control its position. The point of the library is that it moves the desired navigational item out of view when a user is scrolling down so that you can see more content. Then the item shows up when you scroll back up to make it convenient to click on a link if that is what you needed to do.

Current State

I have this current demo on codepen.

That navigational item is at the top of the page but on a lower z-index. So not initially visible.

---

---

when you scroll down the element is out of view.

---

---

But when you scroll up, it is where it needs to be

---

---

Code

HTML

<nav id="page-menu" class="link-header header--fixed slide slide--reset" role="banner">
  <ul>
    <li><a href="#">Products</a></li>
    <li><a href="#">Features</a></li>
    <li><a href="#">Testimonials</a></li>
    <li><a href="#">Cases</a></li>
  </ul>
</nav> 

CSS

#page-menu {
  background-color: #BA222B;
  list-style-type: none;
  width: 100%;
  z-index:10;
}

#page-menu ul { 
  list-style-type: none;
  margin: 0;
  position: absolute;
  bottom: 5px;
  right: 10px;
}

#page-menu ul li {
  display: inline-block;
  margin-left: 10px;
}

#page-menu ul li a {
  text-decoration: none;
  color: #fff;
}

.link-header { 
  background-color:#292f36;
  height: 100px; 
}

.header--fixed {
  position:fixed;
  z-index:10;
  right:0;
  left:0;
  top:0px;
}

jQuery

(function() {
  new Headroom(document.querySelector("#page-menu"), {
    tolerance: 5,
    offset : 150,
    classes: {
      initial: "slide",
      pinned: "slide--reset",
      unpinned: "slide--up"
    }
  }).init();
}());

Full demo on codepen.

Answer 1

Goal :

From what you are describing, you want the read navigation to appear as such on page load:

And move with the gray bar, but and down, as the user scrolls, until it cutoff point reaches the bottom of the gray bar. Then you want things to kick in, and have the red bar slide up and out of view, and then up and down depending on scroll. You want the transition to be smooth.

---

Method:

The thing to keep in mind for a smooth transition is that you have two states: A top state and a bottom state. You have to design both, you have to figure out the exact height to change over, and you have to make sure that they will be identical at that spot, so appear seamless.

Top State:

We don't need any sort of extra positioning here. We want it to be static in fact, as odd as that might sound.

Bottom State:

We want fixed positioning here. Since we want the changeover to occur right when the red bar touches the top of the window, your CSS in fixed-header is perfect already.

Changeover Height:

The header and the gray nav bar combined are 180px, so that number will be our change over.

---

Code:

1. Statechange

Lets work backwards and take the state change first. You will need to change from 150px to 180px in a lot of places. For example, your JS code:

Existing JS:

if ($(window).scrollTop() >= 150) {

...

(function() {
    new Headroom(document.querySelector("#page-menu"), {
        tolerance: 5,
        offset : 150,

New JS:

if ($(window).scrollTop() >= 180) {

...

(function() {
    new Headroom(document.querySelector("#page-menu"), {
        tolerance: 5,
        offset : 180,

And your header will need an updated height, or a removal of height entirely.

Existing CSS:

header {
    height:150px;
    position: relative;
    z-index:30;
}

New CSS:

header {
    position: relative;
    z-index:30;
}

2. Top State

The big thing here messing you up is that for some reason the library you are using is applying .header--fixed and link-header on page load. I don't know how to prevent this, but we can just neutralize is by removing them from your CSS.

Remove This CSS:

.link-header { 
    background-color:#292f36; 
    height: 100px;
}
.header--fixed {
    position:fixed;
    z-index:10;
    right:0;
    left:0;
    top:0px;
}

Second, we need to tweak the ul inside your red nav.

Existing CSS:

#page-menu ul { 
    list-style-type: none;
    margin: 0;
    position: absolute;
    bottom: 5px;
    right: 10px;
}

New CSS:

#page-menu ul { 
    list-style-type: none;
    margin: 0 auto;
    padding:0;
    width:960px;
    max-width:100%;
    text-align:right;
}

3. Bottom State

Everything works really well here aleady, except that the fixed-header class is getting added to the gray nav as well. We need to tweak our jQuery selector bit.

Existing JS:

if ($(window).scrollTop() >= 180) {
    $('nav#page-menu').addClass('fixed-header');
}
else {
    $('nav#page-menu').removeClass('fixed-header');
}

NewJS:

if ($(window).scrollTop() >= 180) {
    $('header nav').addClass('fixed-header');
}
else {
    $('header nav').removeClass('fixed-header');
}

4. Misc Cleanup

Everything looks really good here, except that the lis inside our two navs don't line up. We need to fix some margin-right to bring them into line.

Existing CSS:

#page-menu ul li {
    display: inline-block;
    margin-left: 10px;
}

New CSS:

#page-menu ul li {
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
}

Finally, I noticed that there's a missing closing bracket in your HTML, in the gray nav. It's not hurting much, but it could:

<nav>
    <ul>
        <li><a href="/dentist/">Dentists</a></li>
        <li><a href="/lab/">Labs</a></li>
        <li><a href="/patient/">Patients</a></li>
    <ul>  <--- ( Should be </ul> )
</nav>

End Result:

http://codepen.io/anon/pen/qIrhx