在固定页眉上显示底部阴影，在固定页脚上显示顶部阴影仅在滚动时可见

Question

我已经找到了一个解决方案，该解决方案非常适用于仅在滚动时显示阴影的固定标题。

有没有办法在CSS和JQuery中插入类似的固定页脚？ 另一个请求是，如果还有一种方法可以在中途停止滚动时停止阴影和转换？

Here是该JSFIDDLE页面的链接，并使用了此脚本。

$(function(){

$(window).on('scroll', function(){

    var opacity = $(document).scrollTop();
    opacity = (opacity > 100 ? 100 : opacity) / 100;

    $('#fixedtop').css('box-shadow', '0 5px 15px rgba(188, 0, 80, ' + opacity + ')');
});

});