Jquery make div sticky to top of browser năm 2024

Will make the h2 heading "Section 1" stick to the top of the page (css position: fixed) and will watch for when the footer element (the paragraph with id = section1footer) comes within 20 pixels of the bottom of the h2 element at which point, the header is scrolled up with the normal flow of the page.

In the example above the height of the div.section-title-container is set prior to calling stickOnScroll(). This was just for demonstrations purposes and could have been achieved via other methods (ie. css). The reason for setting the height of the element around the header is that once the header is fixed on the page, it is removed from the normal flow of the document. By setting the surrounding element's height, the document structure should be maintained when the header is moved to position: position.

NOTE Since this is such a common need, a new input option, setParentOnStick, has been added, wich will automatically set the height of the parent element when set to true.

This plugin will manipulate the following css properties on the element that will be fixed:

• top
• position

Note: Internet Explorer Behaviour When used on a viewport that is not the Window object, the fixed element will be animated (gradual slide down) in Internet Explorer in order to avoid the flashing/flickering affect.

Options

• topOffset : Integer. Optional. Default=0 The number of pixels from the top of the viewport (window) before the element triggers to fixed. Note: This value must be an integer.
• bottomOffset : Integer. Optional. Default=0 The number of pixels between the bottom of the fixed element and the top of the footer before the fixed element scrolls back up the page.
• footerElement : HTMLElement|jQuery|selector. Optional. Default=null The footer element to be used for triggering the fixed element to scroll back up.
• stickClass : String. Optional. Default="stickOnScroll-on" The class name that will be added to the fixed element when it is fixed on the page.
• viewport : HTMLElement|jQuery|selector. Optional. Default=window The viewport that will be used to watch for scrolling. Default is the browser window. Set this to specific elements if sticking elements within a fixed height element with overflow set to auto or scroll and position set to either relative, absolute or fixed. Note for html element, these setting are important.
• setParentOnStick : Boolean. Optional. Default=false If true, the parent element of the node that will be Stick On Scroll will have it's css height attribute set to the height of the node. Use this option when wanting the page flow to maintain the original height of the element when Stick on Scroll is applied. This option will manipulate only the css height attibute of the parent element and only when the node is "stuck". When not Stuck, the css height is set to "" (empty).
• setWidthOnStick : Boolean. Optional. Default=false If true, the width of the element that will be made sticky is set so that it maintains the same width when its position is removed from the normal page flow (position:fixed). The width is then removed when the element returns to the normal page flow position.
• onStick : Function. Optional. Default=null

  A function to be called when the element becomes sticky on the page. Function will have a scope of element that was made sticky, which will also be provided as the first argument to the Function. Example:

  onStick: function($ele){

  // this = jQuery object of the sticky element  
  

  }

• onUnStick : Function. Optional. Default=null

  A function to be called when the element becomes un-sticky on the page. Function will have a scope of element whose stickiness was removed, which will also be provided as the first argument to the Function. Example:

  onUnStick: function($ele){

  // this = jQuery object of the sticky element  
  

  }

Events

The following events are triggered by this plugin:

• stickOnScroll:onStick

  Triggered when element is made sticky on the page. Usage:

  $("body").on("stickOnScroll:onStick", function(ev, $stickyEle){

  // ev.target = element that was made sticky - same as $stickyEle  
  

  });

• stickOnScroll:onUnStick

  Triggered when the element's stickyness is removed and placed back into the normal flow of the page. Usage:

  $("body").on("stickOnScroll:onUnStick", function(ev, $stickyEle){

  // ev.target = element that had Sticky removed - same as $stickyEle  
  

  });

Examples

Example 1:

The following example will apply stickOnScroll to a header element inside a scrolling area. Note the css properties set on the viewport element (id=info).

How do I make a div stick to the top of the page?

Method 1: Using the sticky value of the position property It can be given a value of '0px' to make the element leave no space from the top of the viewport, or increased further to leave space from the top of the viewport.

How do I align a div to the top of the page?

To bring a container to the top and center of a page, you can use CSS to set its position to 'absolute' and then use 'top', 'bottom', 'left', and 'right' properties to center it horizontally and vertically on the page.

How do I make a div stick to the top of another div?

One method involves placing both divs inside one parent container. Assign position: relative to the container, then use position: absolute on one or both child divs to position them however you want within the parent.

How do I make a div scrollTo the top of the page?

In the click listener, we call div. scroll with an object with top set to 0 to scroll to the top. And behavior is set to 'smooth' to add smooth scrolling. Now when we click on the scroll to top button, the scrollable div should go back to the top with a smooth scrolling motion during scrolling.