CODEWITHSUNDEEP
javascriptjqueryhtmlcss
niko craft
niko craft

Reputation: 2977

how to change position from fixed to absolute and not have the div jump

I am implementing a sticky behaviour for a div, that works like this when user scrolls the page, the sidebar on the right scrolls up till it reaches close to the top then it stops while user is still scrolling down sidebar should again start to scroll up when user reaches close to the bottom of page.

What happens is when user reaches close to the bottom I change the position of the sidebar from fixed to absolute and that makes it jump.

Is there way to change a position from fixed to absolute and have it not jump while I do that but continue the scroll up from the same coordinates?

<div class="col-md-4" style="border: 0px dashed black; margin-left: 2.933%; height: 832px; osition: relative;">

    <div class="sticky" style="border: 1px dashed red;">
        <div id="map" style="min-height: 350px;"></div>
        <div style="padding: 20px">interesting</div>
        <div style="padding: 20px">interesting</div>
        <div style="padding: 20px">interesting</div>
        <div style="padding: 20px">interesting</div>
        <div style="padding: 20px">interesting</div>
        <div id="last-interesting">last-interesting</div>
    </div>


var stickyHeaderTop = $('.sticky').offset().top;
if( $(window).scrollTop() > stickyHeaderTop-10 ) {
    $('.sticky').css({position: 'fixed', zoom: '1', top: '10px', left:'925px'});
} else {
    $('.sticky').css({position: 'relative', zoom: '1', top: '0px', left: '0px', width:'330px'});
}

if ($('#content-last').visible(true)) {
    // alert('visible');
    console.log($('.sticky').offset().top);
    $('.sticky').css({position: 'absolute', zoom: 'auto', 'z-index': '1', left: '', height: ''});
}

I've tried this also

$('.sticky').css({position: 'absolute', top: '0' zoom: 'auto', 'z-index': '1', left: '', height: ''});

and this

$('.sticky').css({position: 'absolute', top: $(window).scrollTop()+'px', zoom: 'auto', 'z-index': '1', left: '', height: ''});

but the first one is like not setting top at al, just like in the video, and the second one jumps down to the middle of screen.

Got any ideas how I may solve this issue?

you can see the sticky effect I am after right here.

Upvotes: 3

Views: 7721

Answers (3)

Ryan Davis
Ryan Davis

Reputation: 13

You cannot get the same smooth effect changing absolute to fixed and vice versa. You can only get that by using position sticky.

Upvotes: 0

niko craft
niko craft

Reputation: 2977

The best solution I found was to use sticky position that is only implemented in some browsers

position: -webkit-sticky;  // required for Safari
position: sticky;
top: 0; // required as well.

On browsers that is not supported polyfill is used, there is plugin for it https://github.com/wilddeer/stickyfill

To use it just do

$('.sticky').Stickyfill();

It works perfectly, check the demo here http://wd.dizaina.net/en/scripts/stickyfill/

Upvotes: 0

Harshal Carpenter
Harshal Carpenter

Reputation: 506

I can show you how to make from position: static to position:fixed, I think you can use it to what you want to do:

HTML:

<div class='container'>
  <div class='body'>

  </div>
  <div class='right'>
    <div class='box'>

    </div>
  </div>
</div>

Sorry for SCSS

SCSS: 

.container{
  div{
    display:inline-block;
    float:left;
  }
}
.body{
  background-color: #3fa142;
  height: 250vh;
  width: 65%;
}
.right{
  padding-top: 70px;
  height: 250vh;
  width: 34%;
  .box{
    height: 34vh;
    background-color: #f66a68;
    width: 150px;
  }
}

jQuery:

boxPosition = $(".box").offset().top;
$(window).scroll(function(){
   var isFixed = $(".box").css("position") === "fixed";
   if($(window).scrollTop() > boxPosition && !isFixed){
            $(".box").css({position:"fixed", top: "0px"});
   }else if($(window).scrollTop() < boxPosition){
        $(".box").css({position:"static"});
   }
})

Let me know if you have any questions regarding this solution.

JSFiddle Link

Upvotes: 2

Related Questions