javascript - how to change position from fixed to absolute and not have the div jump - Stack Overflow

admin管理员组

文章数量:1026989

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.

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.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jan 27, 2017 at 18:19 niko craft asked Jan 26, 2017 at 22:44 niko craftniko craft 3,00755 gold badges4747 silver badges7575 bronze badges 13

• 1 position: absolute is setting an elements position "relative to its first positioned (not static) ancestor element" (w3schools./cssref/pr_class_position.asp) So maybe making yourself clear how this works might be a good approach. Check all the ancestor elements and find out the one to which your .sticky is relatively positioned. – elementzero23 Commented Jan 26, 2017 at 22:52
• Placing the div outside everything (so that <body> is the only ancestor) might do the trick. – elementzero23 Commented Jan 26, 2017 at 22:53
• 1 not directly related, but you have osition: relative; in your HTML. missing a "p". – Aᴍɪʀ Commented Jan 26, 2017 at 22:54
• @Aᴍɪʀ actually this might be related considering what I wrote before – elementzero23 Commented Jan 26, 2017 at 22:57
• Shouldn't if ($('#content-last').visible(true)) { be: if ($('#content-last:visible')) {? – Scott Marcus Commented Jan 26, 2017 at 22:58

 |  Show 8 more ments

3 Answers 3

Sorted by: Reset to default 2

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

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./wilddeer/stickyfill

To use it just do

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

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

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

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.

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.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jan 27, 2017 at 18:19 niko craft asked Jan 26, 2017 at 22:44 niko craftniko craft 3,00755 gold badges4747 silver badges7575 bronze badges 13

• 1 position: absolute is setting an elements position "relative to its first positioned (not static) ancestor element" (w3schools./cssref/pr_class_position.asp) So maybe making yourself clear how this works might be a good approach. Check all the ancestor elements and find out the one to which your .sticky is relatively positioned. – elementzero23 Commented Jan 26, 2017 at 22:52
• Placing the div outside everything (so that <body> is the only ancestor) might do the trick. – elementzero23 Commented Jan 26, 2017 at 22:53
• 1 not directly related, but you have osition: relative; in your HTML. missing a "p". – Aᴍɪʀ Commented Jan 26, 2017 at 22:54
• @Aᴍɪʀ actually this might be related considering what I wrote before – elementzero23 Commented Jan 26, 2017 at 22:57
• Shouldn't if ($('#content-last').visible(true)) { be: if ($('#content-last:visible')) {? – Scott Marcus Commented Jan 26, 2017 at 22:58

 |  Show 8 more ments

3 Answers 3

Sorted by: Reset to default 2

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

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./wilddeer/stickyfill

To use it just do

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

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

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

本文标签： javascripthow to change position from fixed to absolute and not have the div jumpStack Overflow