Fixed a object at top of page when scrolling

Question

I have this piece of code which trying to maintain my div at the top of the page when scrolling. But it is not working.

Can help me out on where i am wrong?

This object is inside a <div class='container'> and div row.

<div id="compareDiv"><a id="compare"
 href="#animatedModal" disabled class="compare-products">Compare Domestic </a>
                        </div>

<script>
    $(window).scroll(fixDiv);
function fixDiv() {
var $div = $("#compareDiv");
if ($(window).scrollTop() > $div.data("top")) { 
    $('#compareDiv').css({'position': 'fixed', 'top': '0', 'width': '100%'}); 
}
else {
    $('#compareDiv').css({'position': 'static', 'top': 'auto', 'width': '100%'});  }
}$("#compareDiv").data("top", $("#compareDiv").offset().top); // set original position on load

UPDATED

It was hide behind my other object. i set the z-index and solved.

Thanks guys

Answer 1

You can do this with CSS

use {position: fixed} and {top: 0} and make use of the z-index property

#compareDiv {
  position: fixed;
  top: 0;
  z-index: 2;
  background: red;
  width: 100%
}
a {
  text-decoration: none;
  color: white;
  background: green;
}
.otherstuff {
  color: #999;
  background: #131418;
  text-align: justify;
  margin: 2em auto;
  padding: 3em;
}

<div id="compareDiv"><a id="compare" href="#animatedModal" disabled class="compare-products">Compare Domestic </a>
</div>
<div class="otherstuff">
  Spicy jalapeno bacon ipsum dolor amet ut venison leberkas proident t-bone in do pork. Excepteur proident ut officia occaecat sint. Turkey ad boudin labore chicken proident. Drumstick tongue commodo ribeye biltong tri-tip incididunt filet mignon aute spare
  ribs voluptate brisket short loin. Turkey burgdoggen consequat, adipisicing aliqua et doner. Meatloaf chicken sausage, pork chop reprehenderit turducken tail cupim aute fugiat. Ad shoulder kevin jowl, commodo ham hock in in incididunt quis irure. Shankle
  t-bone bacon incididunt, flank aute pancetta tempor andouille et shank cow. Cillum in porchetta voluptate eiusmod qui consectetur fatback aliquip tenderloin. Dolor ut ham hock consectetur, aute sunt strip steak cupim chicken. Incididunt ground round
  ad beef ribs ut jowl reprehenderit laborum exercitation excepteur minim esse ribeye labore. Picanha doner landjaeger, pork chop pig ea ham hock venison spare ribs fugiat flank beef ribs irure. Porchetta meatloaf hamburger, pariatur et dolore excepteur
  nisi cillum laborum esse boudin qui jowl. Adipisicing meatball in aute alcatra. Minim quis officia sausage magna turkey picanha nulla cow incididunt ham adipisicing pancetta. Strip steak deserunt in brisket est ut. Sed laborum eu ad ut minim tri-tip
  sint veniam chuck. Bresaola adipisicing tongue pork loin boudin id andouille dolor minim voluptate eiusmod reprehenderit filet mignon labore. Pariatur proident enim, landjaeger id corned beef velit esse ribeye picanha commodo nostrud reprehenderit sunt
  tenderloin. Eiusmod minim short ribs, cupim hamburger kielbasa ex porchetta venison enim veniam eu aute. Prosciutto leberkas occaecat corned beef. Landjaeger beef tenderloin, id rump est enim non nisi corned beef bresaola. Eiusmod fugiat andouille culpa
  dolore. Ex flank irure est venison pork loin consectetur pig anim aliquip laboris pork chop shank. Aliqua id magna dolor sint strip steak nostrud. Consectetur kevin cupim, aute pork belly esse shoulder ribeye bacon ea capicola venison alcatra. Flank
  aute porchetta ribeye picanha meatball adipisicing pork shank consequat nostrud pig. Dolore ex in sint tempor. Filet mignon cupidatat culpa porchetta. Nulla labore qui ham ad tail. Drumstick magna beef ribs, qui ribeye beef laboris corned beef. Ground
  round et excepteur, shoulder tri-tip enim dolore non reprehenderit cow drumstick laborum cillum nulla ut. Capicola pastrami nisi sint strip steak leberkas, brisket cupidatat hamburger jerky cupim dolor turducken. Pork pastrami laborum corned beef rump
  quis dolore bacon eu adipisicing bresaola turducken deserunt beef ribs. Ex ullamco burgdoggen kielbasa beef veniam shank hamburger dolor sunt adipisicing pork chop pancetta. Nostrud kevin kielbasa beef doner proident elit quis fatback tri-tip est porchetta.
  Sed pancetta eu cow meatloaf. Short ribs cupim sausage consectetur burgdoggen chuck ea. Magna esse nisi cillum tri-tip dolore sint frankfurter commodo. Magna turkey t-bone, sunt leberkas tri-tip esse. In leberkas sirloin, velit chicken deserunt lorem
  laboris occaecat exercitation chuck pork loin turkey picanha. Officia andouille reprehenderit, salami turkey frankfurter picanha commodo aliqua aliquip tail eiusmod biltong cow. Pig eiusmod reprehenderit, meatball sausage ut jowl brisket occaecat laborum
  rump cow ham tri-tip nisi. Boudin ex rump qui, pancetta leberkas laboris dolore beef. Consectetur in kielbasa non, cupidatat ad pork chop. Rump exercitation commodo, ut in duis burgdoggen drumstick chicken reprehenderit veniam. Tempor shoulder adipisicing
  ut, pariatur deserunt proident shank. Brisket landjaeger est quis andouille jowl chicken drumstick cillum. Lorem ad meatball swine short ribs shoulder ut nisi salami kevin. Adipisicing ut jerky ham officia. Adipisicing officia corned beef prosciutto
  non est irure fugiat jowl pork chop ball tip andouille minim commodo ut.
</div>

Answer 2

$(function(){
 var shrinkHeader = 300;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= shrinkHeader ) {
           $('.header').addClass('shrink');
        }
        else {
            $('.header').removeClass('shrink');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #cc5350;
    color:#fff;
    z-index: 1000;
    height: 200px;
    overflow: hidden;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    transition: height 0.3s;
    text-align:center;
    line-height:160px;

}
.header.shrink {
    height: 100px;
    line-height:80px;
}
.header h1
{
    font-size:30px;
    font-weight:normal;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.header.shrink h1
{
    font-size:24px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.content
{
height:2000px;
 /*just to get the page to scroll*/
}

<div class="header">
  <h1>Animated Fixed Header (Scroll Down)</h1>
</div>
<div class="content">
</div>

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

Would you please try above code? I think it's helpful for you.

Answer 3

You need to keep two things in mind when you are dealing with this case:

1. You must never ever compare a moving <div> for reference and set the CSS.
2. Also, use JS only to add or remove class and use the CSS to set the positioning.

Something that I would do will be:

$(function () {
  $(window).scroll(function () {
    if ($(window).scrollTop() > $("nav").position().top)
      $("nav").addClass("fixed");
    else
      $("nav").removeClass("fixed");
  });
});

nav ul,
nav ul li {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  text-decoration: none;
  padding: 5px;
  display: block;
  border: 1px solid #ccc;
  border-radius: 5px;
  color: #000;
}
nav.fixed {
  margin-bottom: 50px;
}
nav.fixed ul {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 9;
  border-bottom: 1px solid #ccc;
  padding: 10px;
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<h1>Hello, World!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem laboriosam incidunt consequatur earum tempora eius, nostrum fugit eveniet recusandae dolorum ab eaque quia fuga molestias ipsum tempore, porro, atque minima.</p>
<nav>
  <ul>
    <li><a href="">Nav Item 1</a></li>
    <li><a href="">Nav Item 2</a></li>
    <li><a href="">Nav Item 3</a></li>
    <li><a href="">Nav Item 4</a></li>
    <li><a href="">Nav Item 5</a></li>
  </ul>
</nav>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, unde, debitis. Est blanditiis obcaecati maxime quo id explicabo maiores placeat similique odit enim. Reiciendis, libero hic beatae cum perferendis odio.</p>
<p>Nemo, reprehenderit exercitationem soluta, iste tempora aliquid voluptas eaque, repudiandae id optio mollitia suscipit amet. Quis repellendus quae et maiores harum deleniti blanditiis. Distinctio, voluptatem quo optio, aut pariatur perferendis!</p>
<p>Obcaecati facere, quam doloribus maiores nisi unde nostrum! Fuga minus, consequuntur reiciendis nemo labore quaerat magni omnis ipsum. Quos vitae natus tempora adipisci quasi, delectus ad eius odit voluptates placeat?</p>
<p>Ea iure quibusdam officia, dolor enim dolores at quo temporibus quod sit placeat ratione eligendi alias fugiat deleniti sed voluptates vero veritatis et porro dolorum, facere explicabo iste. Quo, commodi.</p>
<p>Libero, nobis nihil, iusto unde autem ex iste nisi totam fuga reiciendis ab dolorum in voluptas minima neque fugiat odio. Saepe atque dolor, similique earum quidem, quas maxime doloribus nobis.</p>
<p>Neque ut labore aut impedit eum. Enim, repellendus, cumque! Aliquam voluptas, officiis minus totam animi consectetur maxime consequuntur ratione dolor quasi repellat debitis accusantium hic placeat ipsum, nihil optio eaque!</p>
<p>Maxime labore, fugiat omnis, non, impedit accusamus, tempore eos rem minima ipsum vitae. Quo repudiandae voluptate eius nisi vel commodi sint, dolorem minus, dolor, nulla dolores. Molestias voluptas accusantium libero.</p>
<p>Placeat quia voluptas consequatur voluptatum, exercitationem pariatur magnam beatae nostrum nobis unde adipisci distinctio itaque ex dolores, molestias quae voluptatibus accusamus nihil tenetur eum, ea eligendi vel. Ullam perferendis, magni.</p>
<p>Earum perspiciatis, quaerat ab autem, pariatur aliquid voluptatem eaque facere voluptas molestias culpa impedit debitis fuga sapiente non ratione officiis. Quisquam aliquam voluptates dolores, obcaecati sunt ipsa doloribus sint vero.</p>
<p>Optio harum dolores esse impedit facilis ducimus, nihil veritatis, explicabo doloribus, assumenda veniam quam, nisi illum deleniti iure illo. Ea voluptatibus in quam repellat provident optio ipsum corporis non velit.</p>
<p>Quasi dolorem amet porro, quas nam delectus labore, nostrum cum illum, fugiat dolores iste cupiditate. Architecto tempora totam iusto corporis quaerat nesciunt saepe veritatis error, maiores doloremque eaque, omnis ea.</p>
<p>Quo maiores odio dolorem possimus suscipit vitae voluptates eum ullam! Ipsa aliquam at veritatis incidunt dolor, cum ut expedita explicabo autem iure! Natus quisquam neque accusantium, illum rem quaerat qui.</p>
<p>Dolorem consequatur quidem, tempore et odio modi maiores quibusdam repellendus earum, ipsam itaque totam iusto. Dolorem, libero, quam in ducimus, voluptatum et repudiandae ex magni, itaque est facere qui expedita.</p>
<p>Necessitatibus minima doloribus veritatis. Iusto sint, sapiente odit temporibus culpa recusandae error vitae, ut nam esse totam. Deleniti, aspernatur itaque facere quas ullam, assumenda vero, ducimus quaerat a eligendi unde.</p>
<p>Debitis, voluptas vel, sint quae nisi consequuntur. Obcaecati amet, magni impedit accusantium blanditiis fugit voluptatem dicta, officiis laudantium tempore minima, veniam. Distinctio sapiente provident rem animi perspiciatis obcaecati earum amet?</p>