WeCodePixels / theia-sticky-sidebar

Glues your website's sidebars, making them permanently visible while scrolling.
MIT License
569 stars 209 forks source link

1px issue at the bottom of sidebar #14

Closed a1tus closed 7 years ago

a1tus commented 8 years ago

Hello again!

I's more like a question than an issue because I'm not quite sure if it's a bug or I just misunderstood something. I've recently found that after scrolling bottom I always get 1px difference between sidebar's and content's bottom borders. So I've checked the code and found that it happens because of padding-bottom: 1px rule that is being added to the sticky every time.

Part of the code responsible for that:

// Add a temporary padding rule to check for collapsable margins.
var collapsedTopHeight = o.stickySidebar.offset().top;
var collapsedBottomHeight = o.stickySidebar.outerHeight();
o.stickySidebar.css('padding-top', 1);
o.stickySidebar.css('padding-bottom', 1);
collapsedTopHeight -= o.stickySidebar.offset().top;
collapsedBottomHeight = o.stickySidebar.outerHeight() - collapsedBottomHeight - collapsedTopHeight;
if (collapsedTopHeight == 0) {
    o.stickySidebar.css('padding-top', 0);
    o.stickySidebarPaddingTop = 0;
}
else {
    o.stickySidebarPaddingTop = 1;
}
if (collapsedBottomHeight == 0) {
    o.stickySidebar.css('padding-bottom', 0);
    o.stickySidebarPaddingBottom = 0;
}
else {
    o.stickySidebarPaddingBottom = 1;
}

It works nice for top collapsedTopHeight but doesn't for the collapsedBottomHeight. Consider:

// calc top offset
var collapsedTopHeight = o.stickySidebar.offset().top;
// calc height with paddings
var collapsedBottomHeight = o.stickySidebar.outerHeight();
// add 2px to height
o.stickySidebar.css('padding-top', 1);
o.stickySidebar.css('padding-bottom', 1);
// collapsed top height becomes 0
collapsedTopHeight -= o.stickySidebar.offset().top;
// collapsedBottomHeight = (original_height + 2px) - original_height - 0
collapsedBottomHeight = o.stickySidebar.outerHeight() - collapsedBottomHeight - collapsedTopHeight;
// will never be true
if (collapsedBottomHeight == 0) {
    o.stickySidebar.css('padding-bottom', 0);
    o.stickySidebarPaddingBottom = 0;
}

Seems like we should add - 2 to collapsedBottomHeight calculation line if I didn't miss something.

liviucmg commented 7 years ago

I'm going to close this as it may have been solved in the meantime (lots of fixes since 2015), but feel free to open another issue if that isn't the case.