Scrolling Dynamic Positioning Item

Question

purpose

So that the initial loading of the page is indicated below on the page. To make it look like the image below.

Background

I created a navigation element that uses Headroom.js to control my position. The point of the library is that it moves the desired navigational element out of sight when the user scrolls so you can see more content. Then the element is displayed when you scroll back to make it convenient to click on the link if that is what you needed to do.

Current state

I have a current demo on codepen .

, z-index. .

---

---

.

---

---

,

---

---

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();
}());

codepen.

Answer 1

:

, , , :

, , , . , - , , . , .

---

:

, , , : . , , , , .

:

. , static , .

:

fixed . , , , CSS fixed-header .

:

180px, .

---

:

1. StateChange

. 150px 180px . , JS-:

JS:

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

...

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

JS:

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

...

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

header height height.

CSS:

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

CSS:

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

2.

, - , , .header--fixed link-header . , , , CSS.

CSS:

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

-, ul nav.

CSS:

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

CSS:

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

3.

, , fixed-header nav. jQuery.

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.

, , li nav . margin-right, .

CSS:

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

CSS:

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

, , HTML , nav. , :

<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>

:

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