Scrolling Block

On pages with lots of content, users often struggle to scroll back to navigation or other important widgets. A "scrolling block" that follows the viewport solves this — I built a small jQuery plugin called jquery.movingBlock.js for exactly this purpose.

See the live demo: https://markup-javascript.com/examples/example019/index.html

Initialization:

$(document).ready(function() {
    $('#sidebar').movingBlock({
        holder: '#content',
        topDif: 20,
        bottomDif: 20,
        toEl: '#footer',
        cssTop: 'marginTop',
        duration: 300
    });
});

Plugin parameters:

• holder — selector for the scrollable container
• topDif — offset from the top of the viewport (in pixels)
• bottomDif — offset from the bottom of the viewport (in pixels)
• toEl — stops scrolling when this element is reached (e.g. footer)
• cssTop — CSS property to animate: 'marginTop' or 'top' (for absolutely positioned elements)
• duration — animation duration in milliseconds

The plugin handles all edge cases including reaching the bottom of the page and correctly stops before overlapping the footer element.