How to Smoothly Prevent a Fixed Element from Scrolling Past A Specified Element

Question

Essentially what I want to do is keep my blog posts' meta information on the screen at all times. As it is, the meta info (title, author, etc.) is displayed to the left of the post content, and I have it set up where the meta information stays on screen smoothly when I scroll down. However, I'm having an issue:

I can't get it to smoothly not scroll over the #comments DIV. It either overlaps or is jumpy, depending on how I tweak the code.

Here is the JS function I'm using:

function brazenlyScroll() {
    var element = jQuery(".single-post .headline_area");
    var top = element.offset().top - 50;
    var elementHeight = 26 + element.height();
    var maxTop = jQuery("#comments").offset().top - elementHeight;
    var scrollHandler = function() {
        if (jQuery(document).width() > 1035) {
            var scrollTop = jQuery(window).scrollTop();
            if (scrollTop<top) {
                element.css({position:"relative",top:""})
            } else if (scrollTop>maxTop) {
                element.css({position:"absolute",top:(maxTop+"px")})
            } else {
                element.css({position:"fixed",top:"50px"})
            }
        }
    }
    jQuery(window).scroll(scrollHandler);
    jQuery(window).resize(scrollHandler);
    scrollHandler();
}

That code is included via an external JS file and is called at the bottom of the page. You can see all of this in action here: http://www.rickbeckman.org/dumber-and-dumber-and-dumber/

Any help would be greatly appreciated.

Answer 1

您可以通过在meta块到达maxTop时为其添加300px的填充来使注释div缩小到右侧。

Answer 2

I just tested ur code and was able to fix the overlapping by changing 26 to a bigger number, say about 60.

var elementHeight = 26 + element.height();

Hope this helps.