在下面给出的片段中,带有位置粘性的元素不会粘在页面的末尾。
body {
margin: 0;
}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}Run Code Online (Sandbox Code Playgroud)
<!DOCTYPE html>
<html>
<body>
<div class="sticky">I am sticky!</div>
<div style="margin-bottom:2000px;
border:2px solid black ;">
<p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
<p>Scroll back up to remove the stickyness.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset …Run Code Online (Sandbox Code Playgroud)