-1

I want to have a sticky header after some amount of vertical scrolling as it is provided here: https://www.facebook.com/coliseumproductions/

Once the header div containing 'Like', 'Share' and 'Suggest Edits' button touch the top of browser window, it appears as sticky header and does not scroll. Only the content below it is scrolled. How to achieve this?

I have observe that when the desired scroll position is achieved, few styles are applied on div._1pfm and div._3d9q.

Mentioning position:sticky sticks the header to the top. I want the header to stick only once the required div has reached the top after scroll.

How can it be identified that header div has reached the top position of browser?

Ankita
  • 199
  • 3
  • 18
  • 2
    Check CSS property `position: sticky` https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sticky_element – Apal Shah Apr 24 '19 at 08:59
  • 1
    Possible duplicate of [How to fix a header on scroll](https://stackoverflow.com/questions/19158559/how-to-fix-a-header-on-scroll) – Towkir Apr 24 '19 at 09:01

1 Answers1

0

This thing can simply be achieved by CSS property position: sticky. You don't need any JavaScript.

Refer to this example: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sticky_element

Hope this resolves your problem.

Apal Shah
  • 680
  • 8
  • 17