CSS implements the effect of moving elements vertically with the scroll bar: no JavaScript required

This article will explain how to use pure CSS to achieve the effect of elements moving vertically with the scroll bar without writing any JavaScript code. As mentioned in the summary, we will explore two main methods: using position: fixed and position: sticky. Both methods can enable elements to remain in a specific position in the viewport when the page is scrolling, thereby improving the user experience.

Method 1: Use position: fixed

The position: fixed attribute fixes the element at a position relative to the viewport. This means that the element will always remain in the same position on the screen no matter how the user scrolls the page.

Sample code:

 


<title>Fixed Position Example</title>
<style>
body {
  height: 2000px; /* In order to generate scrollbar*/
}

.fixed-element {
  position: fixed;
  top: 10px; /* 10 pixels from the top*/
  left: 10px; /* 10 pixels from the left side*/
  background-color: lightblue;
  padding: 10px;
  border: 1px solid black;
}
</style>



<div class="fixed-element">
  This is a fixed positioning element.
</div>

<p>Scroll the page and you will find that this element is always kept in the upper left corner of the screen. </p>
<p> (Add enough content is added here to generate scrollbars)</p>

Code explanation:

• The .fixed-element class uses position: fixed; to set the element to fixed positioning.
• top: 10px; and left: 10px; define the distance from the top and left of the viewport.
• The top, left, right and bottom attributes can be adjusted as needed to change the position of the element.

Notes:

• position: fixed removes elements from normal document streams, thus may affect the layout of other elements.
• Make sure that fixedly positioned elements do not obstruct important content.

Method 2: Use position: sticky

The position: sticky property behaves similarly to the combination of position: relative and position: fixed. Before scrolling to a specific threshold, an element appears as position: relative; when scrolling to a threshold, it appears as position: fixed.

Sample code:

 


<title>Sticky Position Example</title>
<style>
body {
  height: 2000px; /* In order to generate scrollbar*/
}

.parent {
  position: relative; /* The parent element needs to be set to relative */
  height: 500px; /* Set the height of the parent element to observe sticky effect*/
  border: 1px solid gray;
  margin-bottom: 20px;
}

.sticky-element {
  position: sticky;
  top: 0; /* fixed when scrolling to top*/
  background-color: lightgreen;
  padding: 10px;
  border: 1px solid black;
}
</style>



<div class="parent">
  <div class="sticky-element">
    This is an element that is sticky.
  </div>
  <p>Scroll the page and you will find that this element is pinned there when scrolling to the top. </p>
</div>

<p> (Add enough content is added here to generate scrollbars)</p>

Code explanation:

• The .sticky-element class uses position: sticky; Sets the element to sticky positioning.
• top: 0; defines the fixed position of the element when scrolling to the top of the parent element.
• The parent element needs to set position: relative;, otherwise position: sticky; may not work properly.

Notes:

• position: sticky You need to specify the top, right, bottom, or left attributes to determine when to switch to fixed positioning.
• position: sticky's behavior is affected by the parent element to ensure that the parent element is layout correctly.
• If the height of the parent element is smaller than that of the viscous positioning, the effect of viscous positioning may not be seen.

Summarize

This article introduces two methods to use CSS to achieve the effect of elements moving vertically with scroll bars. position: fixed is suitable for elements that need to be always fixed in the viewport, and position: sticky is suitable for elements that need to be fixed when scrolling to a specific position. Choose the appropriate method according to actual needs, which can easily achieve various scrolling effects and improve user experience. In actual applications, it is necessary to pay attention to the impact of element positioning on page layout and make appropriate adjustments.

The above is the detailed content of CSS implements the effect of moving elements vertically with the scroll bar: no JavaScript required. For more information, please follow other related articles on the PHP Chinese website!