1

My problem sounds pretty simple, but I can't wrap my head around why it's not working.

I have a sidebar on my website and want to make the bottom of this sidebar sticky to the bottom of the browser.

I have tried and thought up several ideas how to achieve this, but in the end it all comes down to an issue I face once I assign my sidebar the sticky position bottom.

My current css for my sidebar includes:

.column-left-outer {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0px;
    }
// for scrollig down
.imp-down {
    position: sticky;
    bottom: 0px;
    }
// for scrolling up
.imp-up {
    position: sticky;
    top: 0px;
    }

Then my HTML components from which column-left-outer is the parent element of everything included in the sidebar and while it has a parent element, it's working with sticky top, so that shouldn't make a difference.

<div class='column-left-outer'>
content
</div>

Last a java script that is supposed to determine if the user is scrolling up or down and depending on which way he scrolls assign imp-up or imp-down.

I think there's no point in posting this since my main issue it that I understand something about sticky bottom wrong and would like to know what my thinking issue is.

URK
  • 31
  • 5
  • Are you sure you haven't mixed up sticky with `position: fixed`? – Rickard Elimää Jan 30 '20 at 00:07
  • 1
    That's not how `position:sticky;` works. It remains relative until you scroll past it, then it remains fixed until you scroll past the parent. https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning – StackSlave Jan 30 '20 at 00:09

0 Answers0