Home >Web Front-end >CSS Tutorial >How Can I Stop Fixed Position Scrolling at a Specific Point Using jQuery?

How Can I Stop Fixed Position Scrolling at a Specific Point Using jQuery?

Susan Sarandon
Susan SarandonOriginal
2024-12-13 03:20:09375browse

How Can I Stop Fixed Position Scrolling at a Specific Point Using jQuery?

Stopping Fixed Position Scrolling at a Certain Point

You have an element that scrolls with the page in a fixed position. However, you want the scrolling to stop at a specific point, say 250px from the top of the page.

jQuery Solution

To achieve this, you can use jQuery:

$(window).scroll(function(){
    $("#theFixed").css("top", Math.max(0, 250 - $(this).scrollTop()));
});

This code:

  • Attaches a scroll event listener to the window object.
  • Gets the current scroll position using $(this).scrollTop().
  • Calculates the maximum value between 0 and the difference between 250px and the scroll position.
  • Sets the top property of the element with the ID "theFixed" to the calculated value.

This ensures that the element stops scrolling at 250px from the top of the page when scrolling up.

The above is the detailed content of How Can I Stop Fixed Position Scrolling at a Specific Point Using jQuery?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn