Menu
I have a question that I think will be best explained using an image, so I am going to attach it.
Ok, so basically what I have is a parent container, and an element inside it (it will actually be a block of text), which we will refer to as the FIXED element.
When the user is at the top of page, I want the fixed element to be at the top of its parent. When the user starts scrolling down the page, and the parent starts moving up the view port, I want the fixed element to follow the scrolling until it reaches the bottom of its parent, then it stops there.
There currently is no HTML or anything for this yet, because I'm in the rough sketching stage of this website.
I am open to using jQuery or javascript in general, my JS skills are limited, and I am familiar with jQuery, but I don't mind copying and pasting code and messing with it.
Any help will be greatly appreciated. Thanks!
289
This can be solved with position : fixed This property will make the element position fixed and still relative to the scroll.
There's another way to disable scrolling that is commonly used when opening modals or scrollable floating elements. And it is simply by adding the CSS property overflow: hidden; on the element you want to prevent the scroll.
Fixed positioning This can be used to create a "floating" element that stays in the same position regardless of scrolling. In the example below, box "One" is fixed at 80 pixels from the top of the page and 10 pixels from the left.
How to Make position: sticky Work With the overflow Property? By specifying a height on the overflowing container, you should be able to make position: sticky work whilst having the container element have the overflow property set.
What you want to do using javascript (with or without jQuery) is change the position of the element absolutely against the position of the parent, the parent should be relative. You change the position based on the position of the scrollbar.
This tutorial has a good explanation of how to accomplish that.
http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/
54
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
