Hide / show element depending on scroll position

scroll-position-hide-fb.js

(function(target, threshold, elem) {
    listener = () => {
        if (target.scrollY > threshold) {
            elem.style.opacity = 1;
        } else {
            elem.style.opacity = 0;
        }
    };
    target.addEventListener(
        'scroll',
        listener,
        false
    );
})(window, 300, document.querySelector('#rightCol'))

for facebook (where I tested this) the below CSS should be injected (inspect element put inside a <style></style> tag

#rightCol {
    transition: opacity 1s;
}