CODEWITHSUNDEEP
css
Hanna Stone
Hanna Stone

Reputation: 303

position: sticky stops half way?

I have a sidebar that has the position: sticky added to it, but when I scroll past a certain point it stops being sticky?!

Tested in Chrome version: Version 61.0.3163.100 and Safari Version: 11.0

HTML:

<div class="sticky">
  this should stick!
</div>

<div class="content">
  this is content
</div>

CSS:

<style media="screen">
  .sticky {
    background-color: #ccc;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top: 15px;
    width: 100px;
    float: left;
  }

  .content{
    background-color: #eee;
    height: 3000px;
    width: 700px;
    float: right;
  }
</style>

Upvotes: 9

Views: 8946

Answers (3)

Shaun Moore
Shaun Moore

Reputation: 118

Here, try this, I would say it's better for this rather than using "Sticky" and it doesn't use Jquery or anything just simple position fixed.

Html

<div class="sticky">
  this should stick!
</div>

<div class="content">
  this is content
</div>

Css

.sticky {
    background-color: #ccc;
    top: 15px;
    width: 100px;
    float: left;
    position:fixed;
  }

  .content{
    background-color: #eee;
    height: 3000px;
    width: 700px;
    float: right;
  }

https://jsfiddle.net/udxuh1qf/

Upvotes: 1

xixe
xixe

Reputation: 148

position: sticky; is not supported most of browsers http://caniuse.com/#feat=css-sticky

You can try something like this:

HTML:

<div class="sticky-block">
  this should stick!
</div>

CSS:

.sticky {
   position: fixed;
   top: 15px;
}

JS:

var $stickyBlock = document.querySelector('.sticky-block');
var origOffsetY = $stickyBlock.offsetTop - 15; // 15 is your top margin

function onScroll() {
    window.scrollY >= origOffsetY ? $stickyBlock.classList.add('sticky') :
    $stickyBlock.classList.remove('sticky');
}

document.addEventListener('scroll', onScroll);

or jQuery:

var $stickyBlock = $('.sticky-block');
var origOffsetY = $stickyBlock.offset().top - 15;  // 15 is your top margin

function onScroll() {
    window.scrollY >= origOffsetY ? $stickyBlock.addClass('sticky') :
    $stickyBlock.removeClass('sticky');
}

$(document).on('scroll', onScroll);

jsfiddle

Upvotes: 0

Atilla Arda A&#231;ıkg&#246;z
Atilla Arda A&#231;ıkg&#246;z

Reputation: 828

I tested your code on jsfiddle and also here, it is probably your screen media query that causes your problem. Check out my version of sticky. I hope it will fix your issue.

      .sticky {
      background-color: #ccc;
      color:red;
      position: sticky;/* required */
      position: -webkit-sticky;/* required */
      top: 15px; /* required */
      float:left;
      }

      .content{
        background-color: #eee;
        height: 3000px;
        width: 700px;
        float right;
      } 
    <div class="sticky">
      this should stick!
    </div>

    <div class="content">
      this is content
    </div>

Upvotes: 0

Related Questions