Fix Element To The Top On Page Scroll - fixx.js

fixx.js is a tiny yet fully configurable jQuery plugin that fixes an element to the top of the screen on page scroll.

Use cases:

• Fixes a nav bar to the top when you scroll past it.
• Fixes a sidebar widget to the top until it reaches the bottom.
• Makes an element always be visible inside a given container.

More features:

• Responsive support on window scroll/resize.
• Allows you to set a placeholder element to prevent other elements resizing/repositioning.
• Allows you to specify the start/end elements.

How to use it:

1. Just load the jquery.fixx.js script after jQuery library and we're ready to go.

<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/jquery.fixx.min.js"></script>

2. Attach the function to the element which should be fixed on the top.

<nav class="nav" id="example">
  Sticky Nav Here
</nav>

$('#example').fixx();

3. Make the nav element sticky using the CSS position: fixed property. That's it.

#example.fixed { 
  position: fixed; 
}

4. Make the nav element sticky until it reach the footer element.

<footer>
  I'm A Footer
</footer>

$('#example').fixx({
  endElement: 'footer'
});

5. Enable/disable the plugin depending on the screen size using the following responsive options.

$('#example').fixx({
  /*
  * Set the window width in pixels that define each Media Query
  * breakpoint in your responsive CSS.
  */
  responsiveBreakpoints: {
    // Mobile to Tablet-portrait screens.
    sm: 768,
    // Tablet-landscape and small desktop screens.
    md: 992,
    // Larger desktop screens and above.
    lg: 1200
  },

  /*
  * list the breakpoints that this element should be Fixed for:
  * "xs" = Extra-small (mobile only) screens,
  * "sm" = Small (mobile and some tablets) screens,
  * "md" = Medium (tablet portrait) screens,
  * "lg" = Large (tablet landscape/desktop) screens.
  */
  fixedBreakpoints: ['xs', 'sm', 'md', 'lg'],
});

6. Decide whether to let a placeholder element elmulate the fixed element's position to stop other page content from repositioning when the element's position changes from static to fixed. The placeholder also adjusts the fixed element's width on window resize for true responsive support.

$('#example').fixx({
  placeholder: true,

  // Whether to add the placeholder before the fixed element in the
  // markup or after it. There're not many benefits to this but it can
  // be very useful in certain situations.
  placeholderPrepend: true,

  // Class to specifically target only this placeholder on the page.
  placeholderClass: ''
});

7. More configuration options.

• offset: The pixel amount to offset the element from the top of the screen.
• offsetCallback: A function() to update the offset dynamically, called on window scroll/resize.
• startElement: Start fixing the element when the screen reaches the top/bottom of this element. This shouldn't be set to the element that you intend to fix, since this will cause a flicker effect. Instead, try the element before it in the DOM and set "startAt: 'bottom'".
• startAt: 'top' or 'bottom'.
• startThreshold: Set a pixel threshold from the top of the screen for when the element should start being fixed.
• startThresholdCallback: A function() to update the threshold dynamically, called on window scroll/resize. For example, change the threshold from 50 to 0 if the user is scrolling up.
• endElement: If defined, the element will stop being fixed when the top of the screen reaches this element.
• endAt: 'top' or 'bottom'.
• endThreshold: Same as the startThreshold option.
• stateFixedClass: Class applied to the sticky element.
• stateStaticClass: Class applied to the element when static.
• stateFreezeClass: Class applied when the element reaches the endElement and freezes in the current position.
• leftPositioning: There are occasions where you might not want to assign a 'left' CSS property to the fixed element. This gives you the option to prevent it from being set.

$('#example').fixx({
  offset: 0,
  offsetCallback: false,
  startElement: $('body'),
  startAt: 'top',
  startThreshold: 0,
  startThresholdCallback: false,
  endElement: null,
  endAt: 'bottom',
  endThreshold: 0,
  stateFixedClass: 'fixed',
  stateStaticClass: 'static',
  stateFreezeClass: 'freeze',
  leftPositioning: true
});

8. Available callback functions.

$('#example').fixx({
  isFixedCallback: function(){},
  isStaticCallback: function(){},
  isFrozenCallback: function(){}
});

---

This awesome jQuery plugin is developed by fiasst. For more Advanced Usages, please check the demo page or visit the official website.