How to Make a Div Stick to the Top of the Screen Once It's Been Scrolled To

How can I make a div stick to the top of the screen once it's been scrolled to?

You could use simply css, positioning your element as fixed:

.fixedElement {
    background-color: #c0c0c0;
    position:fixed;
    top:0;
    width:100%;
    z-index:100;
}

Edit: You should have the element with position absolute, once the scroll offset has reached the element, it should be changed to fixed, and the top position should be set to zero.

You can detect the top scroll offset of the document with the scrollTop function:

$(window).scroll(function(e){ 
  var $el = $('.fixedElement'); 
  var isPositionFixed = ($el.css('position') == 'fixed');
  if ($(this).scrollTop() > 200 && !isPositionFixed){ 
    $el.css({'position': 'fixed', 'top': '0px'}); 
  }
  if ($(this).scrollTop() < 200 && isPositionFixed){
    $el.css({'position': 'static', 'top': '0px'}); 
  } 
});

When the scroll offset reached 200, the element will stick to the top of the browser window, because is placed as fixed.

Make div stick to top of page after scrolling past another div?

I would recommend adding a class to #sticky when it's ready to be fixed to the top of the screen, and then removing that class when you want to 'unstick' it. Then you can manipulate that class in CSS.

e.g. for a class fixed you'd put the following in your CSS:

#sticky {
    display: none;
    background-color: #546bcb;
    height: 70px;
}
#sticky.fixed {
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
}

And then your jQuery would look like this:

$(window).scroll(function() {
    var distanceFromTop = $(this).scrollTop();
    if (distanceFromTop >= $('#header').height()) {
        $('#sticky').addClass('fixed');
    } else {
        $('#sticky').removeClass('fixed');
    }
});

Here's an updated FIDDLE

I might also recommend some jQuery fade or slide effects (see the fiddle).

Sticky div to top of screen when scrolled

First of all, give .jumbotron a relative positioning

position: relative;

And .sticky a height value

height:40px;

You will also need to add an anchor DIV inside the sticky DIV

<div class="sticky"><div id="anchor"></div><p>CURRENT WORK</p></div>

and then the following javascript

$(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('#anchor');
   var offset = startchange.offset();
    if (startchange.length){
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $('.sticky').css('position', 'fixed');
          $('.sticky').css('top', '0');
          $('.sticky').css('z-index', '10000');
       } 
   });
    }
});

See it here: http://jsfiddle.net/ubLgaktp/

EDIT: you can add the javascript to the page itself by putting the following between your head tags

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"</script>
<script>
$(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('#anchor');
   var offset = startchange.offset();
    if (startchange.length){
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $('.sticky').css('position', 'fixed');
          $('.sticky').css('top', '0');
          $('.sticky').css('z-index', '10000');
       } 
   });
    }
});
</script>

EDIT:

Here is a better approach. Use the anchor div to add and remove a class to the div as opposed to changing the class. This way the sticky div become 'unstuck' if the viewer scrolls back down.

Here is the jsfiddle...

http://jsfiddle.net/bh40k8Lg/

the HTML

<div class="row col-md-12">
 <div class="jumbotron">
    <div id="sticky"><div id="anchor"></div><p>CURRENT WORK</p></div>     
 </div>
</div><!-- /row -->

the CSS

.jumbotron {
  margin: 0;
  width: 100%;
  height: 400px;
  background-color: #fff;
  position: relative;
}

#sticky {
  position: absolute;
  bottom: 0; right: 0;
  background-color: red;
  padding: 0 5px;
  width: 200px;
  text-align: center;
    height:40px;
}

.sticky-top {
    position:fixed!important;
    top:0!important;
    z-index:10000!important;
}

the Javascript which you can put between your head tags

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script>
$(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('#anchor');
   var offset = startchange.offset();
    if (startchange.length){
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
        document.getElementById('sticky').classList.add('sticky-top');
       } else {
        document.getElementById('sticky').classList.remove('sticky-top');
       }
   });
    }
});
</script>

Make div sticky on scroll

The easiest solution is to keep your div always sticky but increase the padding-top of the div that is below it to make sure that the content can't go under the sticky div.

This will avoid this:

By moving the page content to the bottom.

Demo: https://jsfiddle.net/g9nhq3up/

Have a div cling to top of screen if scrolled down past it

The trick is that you have to set it as position:fixed, but only after the user has scrolled past it.

This is done with something like this, attaching a handler to the window.scroll event

   // Cache selectors outside callback for performance. 
   var $window = $(window),
       $stickyEl = $('#the-sticky-div'),
       elTop = $stickyEl.offset().top;

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

This simply adds a sticky CSS class when the page has scrolled past it, and removes the class when it's back up.

And the CSS class looks like this

  #the-sticky-div.sticky {
     position: fixed;
     top: 0;
  }

EDIT- Modified code to cache jQuery objects, faster now.

---

Related Topics