jquery - 固定ヘッダーに下部の影を表示し、固定フッターに上部の影を表示するのは、スクロール時にのみ表示されます

Question

スクロール時にのみ遷移を伴う影を表示する固定ヘッダーで非常にうまく機能するソリューションを調べました。

CSS と JQuery を変更して、同様の固定フッターを挿入する方法はありますか? もう1つの要望は、スクロールを途中で止めたときに影と遷移を止める方法もあれば？

これはその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 + ')');
});

});