Have a Div Cling to Top of Screen If Scrolled Down Past It

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.

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.

Sticking Div to Top After Scrolling Past it

Try using the offset().top of the #navwrap element. That way the element will be fixed from it's starting position in the document, regardless of where that is. For example:

function fixDiv() {
    var $div = $("#navwrap");
    if ($(window).scrollTop() > $div.data("top")) { 
        $div.css({'position': 'fixed', 'top': '0', 'width': '100%'}); 
    }
    else {
        $div.css({'position': 'static', 'top': 'auto', 'width': '100%'});
    }
}

$("#navwrap").data("top", $("#navwrap").offset().top); // set original position on load
$(window).scroll(fixDiv);

Example 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 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).

how can I stick the div after scrolling down a little

You can get this effect with jquery

$(function(){
        // Check the initial Poistion of the Sticky Header
        var stickyHeaderTop = $('#stickyheader').offset().top;

        $(window).scroll(function(){
                if( $(window).scrollTop() > stickyHeaderTop ) {
                        $('#stickyheader').css({position: 'fixed', top: '0px'});
                        $('#stickyalias').css('display', 'block');
                } else {
                        $('#stickyheader').css({position: 'static', top: '0px'});
                        $('#stickyalias').css('display', 'none');
                }
        });
  });

DEMO HERE

NOTE: Don't forget to include jquery library link in your page (assuming you as beginner)

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

Scrolling effect: Div scrolls into view, stops once centrered vertically with position: sticky, and then scrolls off screen

You're close, you're having top:50%;, now give the .sticky-content a transform:translateY(-50%); to pull it back 50% of its height, and then you have it vertically centered. Is this what you expect?

section {
  height: 200vh;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
}

.row {
    display: flex;
}

.col {
    flex: 1;
}

.sticky-content {
    position: -webkit-sticky;
    position: sticky;
    top: 50%; /* I can set this to about 30% to make sure most of the time it looks about right, but it's not the same as getting this div to centre exactly in the middle vertically until it's time to scroll off the screen */
    transform:translateY(-50%);
}

img {
  width: 100%;
  height: auto;
  }

<section>
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="sticky-content">
          <h2>A heading</h2>
          <p>Some content</p>
          <p>Some content</p>
          <p>Some content</p>
        </div>
      </div>
      <div class="col">
        <div>
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
        </div>
      </div>
    </div>
  </div>
</section>
<section>
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="sticky-content">
          <h2>A heading</h2>
          <p>Some content</p>
          <p>Some content</p>
          <p>Some content</p>
          <p>Some content</p>
          <p>Some content</p>
        </div>
      </div>
      <div class="col">
        <div>
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
        </div>
      </div>
    </div>
  </div>
</section>

Scrolling Nav Sticks to Top

You can use position: sticky and set the top of the sub-nav to 127px.

See example below:

body {  margin: 0;}
.main-nav {  width: 100%;  height: 100px;  background-color: lime;  position: sticky;  top: 0;}
.sub-nav {  position: sticky;  width: 100%;  height: 50px;  background-color: red;  top: 100px;}
.contents {  width: 100%;  height: 100vh;  background-color: black;  color: white;}
.contents p {  margin: 0;}

<nav class="main-nav">Main-nav</nav>
<div class="contents">  <p>Contents</p></div>
<nav class="sub-nav">Sub-nav</nav>
<div class="contents">  <p>More contents</p></div>

---

Related Topics