Skip to main content
AI Assist is now on Stack Overflow. Start a chat to get instant answers from across the network. Sign up to save and share your chats.
Inlined the images
Source Link
Stephen P
  • 14.9k
  • 2
  • 50
  • 71

I have been reading about fixed div's within relative and absolute div's here:

Fix position of div with respect to another div

Fixed positioned div within a relative parent div

Fixed position but relative to container

And many other but none can help me to achive a behavior I have seen in few pages (blogs). I can not remember one at the moment, but here are some images to explain

View 1 View 1View 1 & View 2 View 2View 2

After scrolling down, the contextual menu sticks to the side of the view and moves down with the scrolling until reach the end of the section in which it stops. If there is more content after it, you can keep scrolling down but the contextual menu no longer follow your view. The same going up, you reach the section, the contextual menu follows you up until the start of the section, then stops and you can keep scrolling up.

Is this posible with only HTML and CSS or do I need a plugin?

Here is a jsFiddle piece of code, perphaps incomplete. Forgot to mention, I'm doing this in Angular 6+ as a component, so I don't have full access to the index.html file with the body tag. The jsFiddle shows what I can work with.

I have been reading about fixed div's within relative and absolute div's here:

Fix position of div with respect to another div

Fixed positioned div within a relative parent div

Fixed position but relative to container

And many other but none can help me to achive a behavior I have seen in few pages (blogs). I can not remember one at the moment, but here are some images to explain

View 1 & View 2

After scrolling down, the contextual menu sticks to the side of the view and moves down with the scrolling until reach the end of the section in which it stops. If there is more content after it, you can keep scrolling down but the contextual menu no longer follow your view. The same going up, you reach the section, the contextual menu follows you up until the start of the section, then stops and you can keep scrolling up.

Is this posible with only HTML and CSS or do I need a plugin?

Here is a jsFiddle piece of code, perphaps incomplete. Forgot to mention, I'm doing this in Angular 6+ as a component, so I don't have full access to the index.html file with the body tag. The jsFiddle shows what I can work with.

I have been reading about fixed div's within relative and absolute div's here:

Fix position of div with respect to another div

Fixed positioned div within a relative parent div

Fixed position but relative to container

And many other but none can help me to achive a behavior I have seen in few pages (blogs). I can not remember one at the moment, but here are some images to explain

View 1View 1 & View 2 View 2

After scrolling down, the contextual menu sticks to the side of the view and moves down with the scrolling until reach the end of the section in which it stops. If there is more content after it, you can keep scrolling down but the contextual menu no longer follow your view. The same going up, you reach the section, the contextual menu follows you up until the start of the section, then stops and you can keep scrolling up.

Is this posible with only HTML and CSS or do I need a plugin?

Here is a jsFiddle piece of code, perphaps incomplete. Forgot to mention, I'm doing this in Angular 6+ as a component, so I don't have full access to the index.html file with the body tag. The jsFiddle shows what I can work with.

jsFiddle added and explanation of angular 6+
Source Link

I have been reading about fixed div's within relative and absolute div's here:

Fix position of div with respect to another div

Fixed positioned div within a relative parent div

Fixed position but relative to container

And many other but none can help me to achive a behavior I have seen in few pages (blogs). I can not remember one at the moment, but here are some images to explain

View 1 & View 2

After scrolling down, the contextual menu sticks to the side of the view and moves down with the scrolling until reach the end of the section in which it stops. If there is more content after it, you can keep scrolling down but the contextual menu no longer follow your view. The same going up, you reach the section, the contextual menu follows you up until the start of the section, then stops and you can keep scrolling up.

Is this posible with only HTML and CSS or do I need a plugin?

Here is a jsFiddle piece of code, perphaps incomplete. Forgot to mention, I'm doing this in Angular 6+ as a component, so I don't have full access to the index.html file with the body tag. The jsFiddle shows what I can work with.

I have been reading about fixed div's within relative and absolute div's here:

Fix position of div with respect to another div

Fixed positioned div within a relative parent div

Fixed position but relative to container

And many other but none can help me to achive a behavior I have seen in few pages (blogs). I can not remember one at the moment, but here are some images to explain

View 1 & View 2

After scrolling down, the contextual menu sticks to the side of the view and moves down with the scrolling until reach the end of the section in which it stops. If there is more content after it, you can keep scrolling down but the contextual menu no longer follow your view. The same going up, you reach the section, the contextual menu follows you up until the start of the section, then stops and you can keep scrolling up.

Is this posible with only HTML and CSS or do I need a plugin?

I have been reading about fixed div's within relative and absolute div's here:

Fix position of div with respect to another div

Fixed positioned div within a relative parent div

Fixed position but relative to container

And many other but none can help me to achive a behavior I have seen in few pages (blogs). I can not remember one at the moment, but here are some images to explain

View 1 & View 2

After scrolling down, the contextual menu sticks to the side of the view and moves down with the scrolling until reach the end of the section in which it stops. If there is more content after it, you can keep scrolling down but the contextual menu no longer follow your view. The same going up, you reach the section, the contextual menu follows you up until the start of the section, then stops and you can keep scrolling up.

Is this posible with only HTML and CSS or do I need a plugin?

Here is a jsFiddle piece of code, perphaps incomplete. Forgot to mention, I'm doing this in Angular 6+ as a component, so I don't have full access to the index.html file with the body tag. The jsFiddle shows what I can work with.

Source Link

Fixed div within relative div

I have been reading about fixed div's within relative and absolute div's here:

Fix position of div with respect to another div

Fixed positioned div within a relative parent div

Fixed position but relative to container

And many other but none can help me to achive a behavior I have seen in few pages (blogs). I can not remember one at the moment, but here are some images to explain

View 1 & View 2

After scrolling down, the contextual menu sticks to the side of the view and moves down with the scrolling until reach the end of the section in which it stops. If there is more content after it, you can keep scrolling down but the contextual menu no longer follow your view. The same going up, you reach the section, the contextual menu follows you up until the start of the section, then stops and you can keep scrolling up.

Is this posible with only HTML and CSS or do I need a plugin?