Menu
So, essentially, I'd like to have an item that is fixed to the the bottom of the page, but when the view scrolls horizontally, it should horizontally scroll too.
I can hack out a means of doing this with JavaScript, but is there any CSS way to do it? I don't mind a few extra DIVs here and there.
815
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.
position: sticky that is a new way to position elements that is conceptually similar to position: fixed . The difference is that an element with position: sticky behaves like position: relative within its parent, until a given offset threshold is met in the viewport.
Position fixed doesn't work with transform CSS property. It happens because transform creates a new coordinate system and your position: fixed element becomes fixed to that transformed element. To fix the problem you can remove transform CSS property from the parent element.
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
CSS part:
#footer {
position:fixed;
bottom:0px;
left:0px
}
jQuery part:
$(window).scroll(function(){
$('#footer').css('left','-'+$(window).scrollLeft()+'px');
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
