Stick Elements To A Certain Container - stickOnScroll

Stick Elements To A Certain Container - stickOnScroll

Yet another jQuery Sticky On Scroll plugin which helps you quickly create sticky header navigation and/or sidebar widgets on the webpage.

The plugin detects the scroll event, loops through a list of elements that need to be stuck and then makes the matched element(s) stick to the top of the viewport (or a specific container, e.g. parent container).

1. To get started, include both jQuery library and the stickOnScroll plugin at the bottom of the web page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.stickOnScroll.js"></script>

2. Attach the function stickOnScroll to the desired element. The data-stickyType attribute is used to specify the sticky type:

  • window: stick the element to the top of the webpage.
  • element: stick the element to a given container element. Use data-stickonscroll attribute to specify the target container element.
<div id="menu" data-stickyType="window">
  ... content here ...
</div>
<div id="menu" data-stickonscroll="menu" data-stickyType="element">
  ... content here ...
</div>
$("#menu").stickOnScroll();

3. Set the top/bottom offset for sticky elements.

$("#menu").stickOnScroll({
  topOffset: 0,
  bottomOffset: 5
});

4. Customize the footer element at which point the plugin disables the Sticky behavior.

$("#menu").stickOnScroll({
  footerElement:  $("footer")
});

5. Specify the element in which you want to track the scroll event.

$("#menu").stickOnScroll({
  viewport: window
});

6. Customize the CSS class which will be appended to the Sticky element.

$("#menu").stickOnScroll({
  stickClass: 'stickOnScroll-on'
});

7. Determine whether or not to automatically set the height of the parent element.

$("#menu").stickOnScroll({
  setParentOnStick: false
});

8. Determine whether or not to automatically maintain the width when the element become Sticky.

$("#menu").stickOnScroll({
  setWidthOnStick: false
});

9. Available callback functions which will be triggered when the element gets/lost Sticky.

$("#menu").stickOnScroll({
  onStick: function(el){
    // do something
  },
  onUnStick: function(el){
    // do something
  }
});

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

  • Publication date: 22.04.2019
  • Source

Whoops, looks like something went wrong.

(1/1) ErrorException

file_put_contents(): Only 0 of 243 bytes written, possibly out of free disk space

in Filesystem.php (line 122)
at HandleExceptions->handleError(2, 'file_put_contents(): Only 0 of 243 bytes written, possibly out of free disk space', '/home/p336588/web/ivanovdmitry.com/public_html/vendor/laravel/framework/src/Illuminate/Filesystem/Filesystem.php', 122, array('path' => '/home/p336588/web/ivanovdmitry.com/public_html/storage/framework/sessions/NrY0bczs1ZwjtLb3T4NlLBm8MxqtdHYcwmY4G5o1', 'contents' => 'a:3:{s:6:"_token";s:40:"ims7NphFztx0CEhNsBMCoUaCWGVODlUEiuYGMXM7";s:9:"_previous";a:1:{s:3:"url";s:85:"http://ivanovdmitry.com/blog/post/stick-elements-to-a-certain-container-stickonscroll";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}', 'lock' => true))
at file_put_contents('/home/p336588/web/ivanovdmitry.com/public_html/storage/framework/sessions/NrY0bczs1ZwjtLb3T4NlLBm8MxqtdHYcwmY4G5o1', 'a:3:{s:6:"_token";s:40:"ims7NphFztx0CEhNsBMCoUaCWGVODlUEiuYGMXM7";s:9:"_previous";a:1:{s:3:"url";s:85:"http://ivanovdmitry.com/blog/post/stick-elements-to-a-certain-container-stickonscroll";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}', 2)in Filesystem.php (line 122)
at Filesystem->put('/home/p336588/web/ivanovdmitry.com/public_html/storage/framework/sessions/NrY0bczs1ZwjtLb3T4NlLBm8MxqtdHYcwmY4G5o1', 'a:3:{s:6:"_token";s:40:"ims7NphFztx0CEhNsBMCoUaCWGVODlUEiuYGMXM7";s:9:"_previous";a:1:{s:3:"url";s:85:"http://ivanovdmitry.com/blog/post/stick-elements-to-a-certain-container-stickonscroll";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}', true)in FileSessionHandler.php (line 83)
at FileSessionHandler->write('NrY0bczs1ZwjtLb3T4NlLBm8MxqtdHYcwmY4G5o1', 'a:3:{s:6:"_token";s:40:"ims7NphFztx0CEhNsBMCoUaCWGVODlUEiuYGMXM7";s:9:"_previous";a:1:{s:3:"url";s:85:"http://ivanovdmitry.com/blog/post/stick-elements-to-a-certain-container-stickonscroll";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}')in Store.php (line 128)
at Store->save()in StartSession.php (line 88)
at StartSession->terminate(object(Request), object(Response))in Kernel.php (line 218)
at Kernel->terminateMiddleware(object(Request), object(Response))in Kernel.php (line 189)
at Kernel->terminate(object(Request), object(Response))in index.php (line 58)