JQuery position DIV fixed at top on scroll

Asked
Active3 hr before
Viewed126 times

6 Answers

jqueryfixedscrollposition
90%

Stack Overflow Public questions & answers , GitLab launches Collective on Stack Overflow , Meta Stack Overflow ,Stack Overflow en español

The JS should look like this:

var distance = $('#navigation-sections').offset().top;

$(window).scroll(function() {

   if ($(window).scrollTop() >= distance) {
      $('#navigation-sections').addClass("affix");

   } else {
      $('#navigation-sections').removeClass("affix");
   }
});
88%

.fixed - content {
   top: 0;
   bottom: 0;
   position: fixed;
   overflow - y: scroll;
   overflow - x: hidden;
}
72%

Let’s say the following is our fixed element div −,Following is our element, which will be scrolled −,The CSS style to fix the above element −,This will produce the following output. The element is fixed above and other is visible on scroll as shown below −

Let’s say the following is our fixed element div −

<div class="fixedElement">
      Fixed
</div>
load more v
65%

The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. Setting the scrollTop positions the vertical scroll of each matched element.,The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very top, or if the element is not scrollable, this number will be 0.,Description: Set the current vertical position of the scroll bar for each of the set of matched elements., version added: 1.2.6.scrollTop( value ) value Type: Number A number indicating the new position to set the scroll bar to.

<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>scrollTop demo</title>  <style>  p {    margin: 10px;    padding: 5px;    border: 2px solid #666;  }  </style>  <script src="https://code.jquery.com/jquery-3.5.0.js"></script></head><body> <p>Hello</p><p></p> <script>var p = $( "p" ).first();$( "p" ).last().text( "scrollTop:" + p.scrollTop() );</script> </body></html>
load more v
75%

In this tutorial, learn how to fix div on top when scrolling using jQuery. It makes the div sticky to the top of the screen on scroll. The short answer is: use the CSS property position:fixed to fix the div and jQuery scrollTop() method to set the scrolling position.,Answer: You can use the CSS position:fixed property with bottom:0 to the <div> element. To make div appear fixed at the bottom on scrolling, you have to use the scrollTop() method.,Answer: To make the div always stays on top, you can use the CSS property position:fixed and top:0 to the <div> element. These two CSS properties make the div element fixed at the top position of the screen.,Answer: You have to apply the CSS position:fixed and top:0 to the <div> element. To make div appear fixed after scrolling, use the scrollTop() method. Set the position value to the method to make div fixed after scrolling.

In this tutorial, learn how to fix div on top when scrolling using jQuery. It makes the div sticky to the top of the screen on scroll. The short answer is: use the CSS property position:fixed to fix the div and jQuery scrollTop() method to set the scrolling position.

position: fixed

In this tutorial, learn how to fix div on top when scrolling using jQuery. It makes the div sticky to the top of the screen on scroll. The short answer is: use the CSS property position:fixed to fix the div and jQuery scrollTop() method to set the scrolling position.

scrollTop()
load more v
40%

To enable this option on a fixed header or footer, add the data-fullscreen attribute to the element.,To enable this behavior on a header or footer, add the data-position="fixed" attribute to a jQuery Mobile header or footer element.,Fullscreen fixed toolbars sit on top of the content at all times when they are visible, and unlike regular fixed toolbars, fullscreen toolbars do not fall back to static positioning when toggled. Instead they disappear from the screen entirely. Fullscreen toolbars are ideal for more immersive interfaces, like a photo viewer that is meant to fill the entire screen with the photo itself and no distractions.,While we will continue to try to find ways to mitigate these bugs as best we can, we currently advise against implementing fixed toolbars containing complicated user styles and form elements without extensive testing in all versions of Android's native browser.

Fixed header markup example:

<div data-role="header" data-position="fixed">
   <h1>Fixed Header!</h1>
</div>
load more v

Other "jquery-fixed" queries related to "JQuery position DIV fixed at top on scroll"