How to make an element stick to the top of the page, bearing in mind that it's not initially there

Question

I am trying to get an element to stick to the top of the page and my code looks somewhat like this...

  <nav>
    <ul>
      <li id="1"><a href="index.html">Home</a></li>
      <li id="2"><a href="services.html"><i class="fa fa-breifcase"></i> Services</a></li>
      <li id="3"><a href="about.html"><i class="fa fa-info-circle"></i> About</a></li>
      <li id="4"><a href="contact.html"><i class="fa fa-paper-plane"></i> Contact</a></li>
      <br><hr color='black' height='5px'>
    </ul>
  </nav>
  <content>
    <div class="intro">
      <h1 class="shadow">Hello</h1>
      <form name="intro-form" action="">
        <input type="text" class="intro-text" placeholder="Hey what's your name?"></input>
        <input type="submit" class="intro-submit" value="Go!" onclick="function val()"></input>
      </form>
      <div id='menu' class="menu">
        <h2 class="togglemenu"><i class='fa fa-cog fa-spin'></i> Options</p>
      </div>
      <a class="down">Scroll <i class="fa fa-arrow-down"></i> Down</a>
    </div>
    <script src='https://lirancohen.github.io/stickUp/js/stickUp.min.js'></script>
<script src='https://lirancohen.github.io/stickUp/js/jquery.js'></script>
    <script type="text/javascript">
      //initiating jQuery
      jQuery(function($) {
        $(document).ready( function() {
          //enabling stickUp on the '.navbar-wrapper' class
          $('.menu').stickUp();
        });
      });

    </script>

The only problem is that it doesn't work as I expected, I tried a lot of things - loading a previous version of jquery from the Google CDN and downlaoded stickUp. Any help or alternative methods would be greatly appreciated.

_bearing in mind that it's not initially there_......what do you mean by that? — Jai, Jul 15 '16 at 07:26
Anyways someone already answered that question it's a dupe http://stackoverflow.com/questions/2907367/have-a-div-cling-to-top-of-screen-if-scrolled-down-past-it — Marko Mackic, Jul 15 '16 at 07:33

Marko Mackic · Accepted Answer · 2016-07-15T07:52:22.807

There is no need for another plugin than jquery:

var $window = $(window),
  $stickyEl = $('.sticky_div'), //here you specify class of the thing you want to be
  //sticky
  elTop = $stickyEl.offset().top;

$window.scroll(function() {
  $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
});

div {
  height: 100px;
  width: 100px;
}
.sticky_div {
  background: red
}
.sticky {
  position: fixed;
  top: 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <nav>
    <ul>
      <li id="1"><a href="index.html">Home</a>
      </li>
      <li id="2"><a href="services.html"><i class="fa fa-breifcase"></i> Services</a>
      </li>
      <li id="3"><a href="about.html"><i class="fa fa-info-circle"></i> About</a>
      </li>
      <li id="4"><a href="contact.html"><i class="fa fa-paper-plane"></i> Contact</a>
      </li>
      <br>
      <hr color='black' height='5px'>
    </ul>
  </nav>
  <content>
    <div class="intro">
      <h1 class="shadow">Hello</h1>
      <form name="intro-form" action="">
        <input type="text" class="intro-text" placeholder="Hey what's your name?"></input>
        <input type="submit" class="intro-submit" value="Go!" onclick="function val()"></input>
      </form>
      <div id='menu' class="menu sticky_div">
        <h2 class="togglemenu"><i class='fa fa-cog fa-spin'></i> Options</p>
      </div>
      <a class="down">Scroll <i class="fa fa-arrow-down"></i> Down</a>
    </div>
    <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
    <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
    <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  
</body>
</body>  
</body>

EDITED to your example :)

let me check, but some mobile devices don't support fixed position property. — Marko Mackic, Jul 18 '16 at 15:17
my phone works with it :) it's about browser you're using on that phone, it does not support `position:fixed` property, try using different browser and same phone :) — Marko Mackic, Jul 18 '16 at 16:28
I'm using the crome inspect element property, it works when I have a certain screen width but not when my screen with is smaller than a certain amount. — Captain Anonymous, Jul 21 '16 at 01:27
It's interesting, I don't know but I don't think screen width has anything to do with this script, and please say at which width it doesn't work so I could confirm that from my side :) — Marko Mackic, Jul 21 '16 at 22:08
@qscyberproject_ I wouldn't know why my friend all you need to do with bootstrap navbar to make it sticky is instead of `sticky` class add `navbar-fixed-top"` class — Marko Mackic, Jul 29 '16 at 06:22

score 0 · Answer 2 · answered Jul 15 '16 at 07:29

I can suggest you these:

If stickUp library needs jQuery then it should be loaded after jQuery.
If the element is not initially there then you can have a condition.

<script src='https://lirancohen.github.io/stickUp/js/jquery.js'></script>
<script src='https://lirancohen.github.io/stickUp/js/stickUp.min.js'></script>
<script type="text/javascript">
  //initiating jQuery
  jQuery(function($) {
    $(document).ready( function() {
      //enabling stickUp on the '.navbar-wrapper' class
      if($('.menu').length){
         $('.menu').stickUp();
      }
    });
  });
</script>

How to make an element stick to the top of the page, bearing in mind that it's not initially there

2 Answers2