Question 187935 in Html Question posted in
Some basic documentation can be found here.

Html – I want my title of my component to be sticky on the whole page

I have a component that contains a title and a description, used by my page. I want my title to be sticky on the entire page, not just within my component. However, I don’t want my description to be sticky, so I can’t make my entire component sticky on the page.
Can someone please help me?

Have a nice day!

Tags:

2

Answers


  1. 0

    You can try enclosing that title in div with a class that is different from it’s entire component’s class. Give that class a CSS position: sticky;

    Login or Signup to reply.
  2. 0

    I understand that you’re trying to make your title sticky throughout the whole page while the description remains non-sticky. There are a couple of ways to achieve this:

    Method 1: Using a Full-Height Container

    You can achieve this by placing your title inside a container that spans the full height of the scrolling area. Here’s an example:

    <div class="wrap">
  <h1 class="sticky-title">Your Title Here</h1>
  <div class="content-area">Your Content Here</div>
</div>

    Then in your CSS, you’d assign the position: sticky property to your title:

    .sticky-title {
  position: sticky;
  top: 0;
}

    In this setup, the title will remain sticky at the top as you scroll through the content area.

    Method 2: Using an Absolute Position Container

    Another method is to place your title within a container that has an absolute position. You can adjust the height of this container to a fixed value, or use JavaScript to dynamically adjust it based on your needs.

    Here’s an example:

    <div class="relative-container">
  <div class="absolute-container">
    <h1 class="sticky-title">Your Title Here</h1>
  </div>
</div>

    And the corresponding CSS:

    .sticky-title {
  position: sticky;
  top: 0;
}

.absolute-container {
  position: absolute;
  height: 2000px;  /* Adjust this to suit your page */
}

.relative-container {
  position: relative;
}

    In this setup, the title will stay sticky at the top, even when scrolling past the description. You can adjust the height of .absolute-container to control when the sticky effect ends.

    Remember, for position: sticky to work effectively, the element’s parent container must have a defined height, and the sticky element must have a defined top or bottom position.

    I hope this helps. If you have any further questions, feel free to ask!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search