What causes a sticky element to come to a halt once it reaches the bottom of its container?

The behavior that occurs when the element with the 'sticky' class is positioned 10% from the top of the viewport and then becomes fixed, but stops being fixed once it reaches the bottom of its container, is quite clear.

My understanding is that fixed elements typically do not exhibit this type of behavior.

I'm curious if there is any documentation available that explains this unique positioning feature?

<head>
  <style>
            .sticky {
                position: sticky;
                top: 10%;
            }
  </style>         
</head>

<div style="height: 150px; margin-top: 100px;">
  <div class="sticky" style="background-color: pink;">I am am sticky. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit optio reprehenderit voluptate? Odit doloribus voluptates obcaecati ex voluptas, accusantium recusandae architecto voluptate corrupti? Aut cumque aspernatur repellat repellendus itaque voluptate?. 
  </div>
</div>
<div> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Obcaecati ab,
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, tempore? Debitis quasi eius doloribus asperiores recusandae voluptate numquam, sed aspernatur, soluta minus facere non iure voluptas tenetur magnam nisi nemo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit doloribus, iure aperiam maiores distinctio quod corporis eligendi repudiandae, vitae repellat dolor error odit possimus natus! Earum autem magni nostrum! Saepe!I am an random Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit optio reprehenderit voluptate? Odit doloribus voluptates obcaecati ex voluptas, accusantium recusandae architecto voluptate corrupti? Aut cumque aspernatur repellat repellendus itaque voluptate?.Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, tempore? Debitis quasi eius doloribus asperiores recusandae voluptate numquam, sed aspernatur, soluta minus facere non iure voluptas tenetur magnam nisi nemo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit doloribus, iure aperiam maiores distinctio quod corporis eligendi repudiandae, vitae repellat dolor error odit possimus natus! Earum autem magni nostrum! Saepe! I am an random Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit optio reprehenderit voluptate? Odit doloribus voluptates obcaecati ex voluptas, accusantium recusandae architecto voluptate corrupti? ptate?.Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, tempore? Debitis qua...

htmlcss

Answer №1

The sticky div remains in place within its container, while the container itself can still be scrolled. To make the div sticky relative to the viewport, there should be no non-fixed elements above it.

To achieve this behavior as expected, you would have to apply position: fixed to the container (along with a margin on the content to prevent it from being hidden by the sticky div).

.sticky {
  position: sticky;
  top: 10%;
}

.wrapper {
  position: fixed;
  height: 150px;
  margin-top: 100px;
}
<div class="wrapper">
  <div class="sticky" style="background-color: pink;">I am am sticky. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit optio reprehenderit voluptate? Odit doloribus voluptates obcaecati ex voluptas, accusantium recusandae architecto voluptate corrupti? Aut cumque aspernatur repellat repellendus
    itaque voluptate?.
  </div>
</div>
<div> Lorem ipsum, dolor sit amet consectetur adipisicing elit...

[Remaining content omitted for brevity]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason for CSS being implemented exclusively on my master page?

I have a link to an external CSS file in the head section of my Master page. <link href="style.css" rel="stylesheet" type="text/css" /> Although I can apply the style in child pages during design time... <asp:Label ID="Label" runat="server" Css ...

asp.netcssmaster-pages

Why does the diamond symbol appear distorted on my iPhone screen?

My website is similar to SO where moderators have a diamond sign at the end of their name. However, I am facing an issue on my iPhone where the diamond sign looks red and distorted (on Chrome it appears normal). https://i.sstatic.net/RnpyP.jpg As you can ...

htmlcssiphone

After calling AJAX, jQuery fails to execute

Encountering an issue with JQuery on a dynamic page. I have a select input: <select id="select"> <option value="1">1</option> <option value="2">2</option> </select> and a text input: <input id="input" type= ...

jqueryhtmlajax

Challenges with JavaScript image rollover functionality

I need help with an assignment that is due tomorrow. I am struggling with a specific requirement which involves implementing a JavaScript image rollover in HTML using a separate script page and then linking it to the HTML Head tag. Despite using the funct ...

javascripthtml

When the Image Icon is clicked, the icon itself should become clickable and trigger the opening of a popup Dialogue Box for uploading a new image

When I click on the image icon, it should be clickable and a popup dialogue box will open to upload a new image. Check out this sample image for reference. Any help on this would be greatly appreciated. Thanks in advance. <div class="d-flex align-ite ...

htmlcssangular

How can I extract a substring from a URL and then save it to the clipboard?

Hi there! I'm working on a project for my school and could really use your expertise. I need help extracting a substring from a URL, like this one: URL = https://www.example.com/blah/blah&code=12432 The substring is: 12432 I also want to display ...

javascripthtmljquerycssweb

showing a message in a pop-up alert box

$(document).ready(function(){ $(document).on('click', '#btnSave', function () { var fname = $("#fname").val(); var lname = $("#lname").val(); var email = $("#email").val(); var mobile = $("#mobile").val(); if(fname == ""){ alert(&apos ...

javascriptjqueryhtmlbootstrap-4

Unique design Radio Button Inputs with Custom CSS Styling and Enhanced Accessibility for Voice Controls

On my website, I have implemented custom radio buttons using this model: The custom radio buttons are working well with various browsers and are accessible with Jaws. However, I encountered an issue when trying to use Voice Over as the radio button canno ...

jquerycssradio-buttonaccessibilityvoiceover

A guide on converting an HTML tag ID to a PHP string

I am currently working on a project that is giving me some trouble with errors. I have created an HTML file called name.html and a PHP file named result.php. In the HTML file, I included some JavaScript to take us to result.php when we click on the Submit ...

javascriptphpjqueryhtmlcss

what is the best way to position a glyphicon next to a form?

Forgive me for asking such a basic question, but I struggle with aligning and positioning elements. Here is my issue: https://i.sstatic.net/Uy6XB.jpg https://i.sstatic.net/TTs6V.jpg All I want is for the glyphicon to be displayed next to the textfield, ...

htmlcsstwitter-bootstrap-3

Can we resize the button to match the width of the blue bar?

.nav-info { height: auto; background-color: darkblue; color: white; padding: 1em; padding-left: 5%; flex-direction: row; justify-content: space-between; } .flexbox { display: flex; } .info a { color: white; text-decoration: none; fo ...

htmlcssflexbox

Unable to apply text decoration to a floating element

Why is text-decoration not applying to a span inside a div after floating the span, and how can this be fixed? To see the issue in action, visit: http://jsfiddle.net/wtBDX/2/ div { color: red; text-decoration: line-through; } div span { float: rig ...

htmlcsscss-floattext-decorations

Checkbox label covering checkbox

I've been trying to enhance a login page with checkboxes by implementing code from react-bootstrap.github.io The issue I'm facing is that the checkboxes are overlapping their corresponding labels. Below is the snippet from my register.js file: ...

htmlcssreactjstwitter-bootstrap

What steps can be taken to avoid a component from re-rendering (or maintaining its state unchanged) during page transitions?

Is there a way to prevent a shared component, like a sidebar, from re-rendering when transitioning between two pages? Specifically, if the sidebar is fixed at a certain y position in the scroll track, how can we ensure that it remains unchanged when navig ...

javascripthtmlcssreactjs

Struggling to access a .html page using Selenium?

Currently utilizing behat/mink, selenium 2 driver, and chrome driver in php to navigate a unique issue. Attempting to access a dummy HTML page proving challenging. Our team is implementing a chatbot onto our main site's landing page as an iframe posit ...

phphtmlseleniumbehatmink

Immersive video platform combining HTML5 and Flash technologies

Is there a way to produce videos like the ones seen on this website: ? Are there any other websites or tutorials available that offer similar video creation techniques? ...

htmlflashvideohtml5-videoflash-video

Various degree of stacking priority ordering

I was faced with a coding dilemma that I couldn't quite figure out. The title may not give much away, but the issue lies within this code snippet: https://jsfiddle.net/bnh3487n/ div { width: 100%; } #wrapper { width: 500px; height: 500px; ...

htmlcss

Updating information without the need for a page refresh

My project involves text boxes and drop-down menus where users input data, then click "generate" to combine the text from the boxes and display the result on the page. I'm struggling with clearing these results if the user clicks generate again, for ...

javascriptjqueryhtmlforms

Tips for creating image-based navigation with embedded text

The quick brown fox jumps over the lazy dog. ...

htmlcssnavigationweb

The CSS for a VueJS compiled app seems to fail to apply properly unless manually copied and pasted into the browser's style editor

After compiling my vuejs app with npm run build, I noticed that the CSS does not display when viewing it in Firefox. Surprisingly, the styles do load in the network tab and appear under the style editor, but with "0 rules". However, everything displays fin ...

cssvue.js