How to better change the position of fixed element

position: fixed
position: fixed relative to parent
position: fixed not working
position: sticky
css position: fixed
position: sticky not working
position: absolute
z-index

Please check this example. You can see it better at Codepen. I want the #fixed div to not cover the #bottom div. So I change the top property of #fixed whenever the #fixed is about to cover #bottom.

But if I scroll the page too fast, this situation still shows up. Do you have a way to fix it? Thanks for your answer.

document.addEventListener('wheel', changeFixed, false);

function changeFixed() {
  const footToTop = document.getElementById('bottom').getBoundingClientRect().top;
  const viewHeight = window.innerHeight;
  const isButtom = footToTop + 0 < viewHeight;
  document.getElementById('fixed').style.bottom = isButtom ? 100 + 'px' : 30 + 'px';
}
* {
    margin: 0px;
}
#container {
    height: 300vh;
    display: flex;
    align-items: flex-end;
  
}
#fixed {
    transition: top 1s;
    position: fixed;
    left: 10px;
    bottom: 30px;
    width: 100px;
    height: 200px;
    background: red;
}
#bottom {
    width: 100vw;
    height: 50px;
    background: blue;
}
<div id="container">
  <div id="fixed"></div>
  <div id="bottom"></div>
</div>

How about this pure css solution using position: sticky

* {
    margin: 0px;
}
#container {
    height: 300vh;
    display: flex;
    align-items: flex-end;
    padding-bottom:10px;
  
}
#fixed {
    
    position: sticky;
    left: 10px;
    bottom: 20px;
    width: 100px;
    height: 200px;
    background: red;
}
#bottom {
    width: 100vw;
    height: 50px;
    background: blue;
}
<div id="container">
  <div id="fixed"></div>
  
</div>
<div id="bottom"></div>

Advanced layouts with absolute and fixed positioning � WebPlatform , If not, move to the parent's parent element and repeat from step 1 until you find of absolute positioning, so we'll study that later, and concentrate on the more� You basically need to set topand leftto 50%to center the left-top corner of the div. You also need to set the margin-topand margin-leftto the negative half of the div's height and width to shift the center towards the middle of the div. Thus, provided a <!DOCTYPE html>(standards mode), this should do:

What about listen to the "scroll" event?

document.addEventListener('scroll', changeFixed, false);

Absolute, Relative, Fixed Positioning: How Do They Differ?, There are two more: static , which is the default, and sticky , which is a whole fancy A fixed position element is positioned relative to the viewport, or the The viewport doesn't change when the window is scrolled, so a fixed� fixed. A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn’t change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled.

I think what you need to know is when you have scrolled to the bottom. Which means if you have scrolled to the bottom, you know there is a bottom div, and then you should move your fixed div 50px from the bottom. Something like this,

function changeFixed() {
  const documentHeight = document.body.scrollHeight;
  const scrollPosition = window.scrollY;
  const viewHeight = window.innerHeight;
  // documentHeight - (scrollPosition + viewHeight) will be 0 when you have scrolled to bottom.
  if (documentHeight - (scrollPosition + viewHeight) <= 50) {
    document.getElementById('fixed').style.top = "auto";
    document.getElementById('fixed').style.bottom = "50px";
  } else {
    document.getElementById('fixed').style.top = "200px";
    document.getElementById('fixed').style.bottom = "auto";
  }
}

PS: You'll need to add appropriate transitions if you want animation.

position, static : every element has a static position by default, so the element will This browser support data is from Caniuse, which has more detail. The position of the element is calculated in the same way as the absolute model, but fixed elements are then fixed in that location — almost like a watermark. Everything else on the page then scrolls past that element.

Positioning, Static positioning is the default that every element gets — it just higher up the stack, and negative values move them lower down the stack. A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). Note: Not supported in IE/Edge 15 or earlier. Supported in Safari from version 6.1 with a -webkit- prefix. Try it » initial

How to use the position property in CSS to align elements, Positioning elements with CSS in web development isn't as easy as it seems. the video on my channel to see how to use the z-index in more details: for all non-static position values, we are able to change an element's� Resize and see how the fixed elements even move with the floated elements they are in. Use the inner-most scroll bar to see how the scroll would work on a site (fixed elements staying fixed). As many here have stated, one key is not setting any positional settings on the fixed element (no top , right , bottom , or left values).

CSS Layout - The position Property, An element with position: static; is not positioned in any special way; it is An element with greater stack order is always in front of an element with a lower stack� An absolute position element is positioned relative to the first parent element that has a position other than static. So in your case your parent div should have position:relative and your child div should have position:absolute instead of position:fixed

Comments
  • Why do you use "wheel" event? Try "scroll" event
  • Hello @suedar, I'm having a hard time reproducing your issue on codepen, the fixed div never covers the bottom one for me, doesn't matter how fast I scroll. Sticky could be an option if you're okay with the browser support.
  • Hi @Jake. Please check the codepen example.
  • it's clear, you are applying a transition and if you are faster than the transition you will cover the element. It's not an issue but the intended result
  • @suedar I had to lower window height to reproduce the problem since it's based on VH, my bad. Why don't you simply modify this line to const isButtom = footToTop - 0 < viewHeight; to const isButtom = footToTop - 100 < viewHeight; for example ?