How to adjust my floating bar when minimized

Right now the code below floats to the left side of the content and it's visible when you scroll down. So far everything is Okay as long as the window is maximized. But when it's minimized or you increase the zoom the bar shows over the content which I don't want it to. In these cases (minimized window and increased zoom) I'd like the bar to be stuck to left margin so it won't be shown over the content. Obviously the bar must keep being floating to the left and visible when scrolled down (if the window is maximized). What changes do I need to do to accomplish this? Thank you very much for your support in advance!

#pageshare 
{
position:fixed; 
bottom:15%; 
right:10px; 
float:left; 
border: 1px solid #5c5c5c; 
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#e5e5e5;
padding:0 0 2px 0;
z-index:10;}

#pageshare .sbutton 
{
float:left;
clear:both;
margin:5px 5px 0 5px;
...
}

Solution

You can accomplish this by using JavaScript to modify the attributes of both the main site container as well as the pageshare container. For simplicity, I utilized jQuery.

Adjust Site Margin (jsfiddle)

I created a method that adjusts the site margin based on the amount of space needed by the pageshare container. First, this method calculates the amount of space needed for the pageshare container (based on its width and its left offset) and the amount of space available (the site width subtracted from the window width, normalized to zero if negative). The method then calculates the difference between these two values and applies the value to the left margin of site container. This ensures that the pageshare container does not overlay the content. In addition, the reason I am setting and removing scroll event handlers is because otherwise the pageshare container will still appear over the content on a small window when you scroll left and right (example of issue).

function adjustSiteMarginForPageShare() {
    // Get the window dimensions
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
    // Get the site width
    var siteWidth = $('#inner-wrapper').outerWidth();
    // Get the pageshare dimensions
    var pageshareWidth = $('#pageshare').outerWidth();
    var pageshareHeight = $('#pageshare').outerHeight();
    // Get the pageshare left offset
    var pageshareLeft = $('#pageshare').offset().left;

    // Calculate the needed pageshare space
    var pageshareSpaceNeeded = pageshareWidth + pageshareLeft;
    // Calculate the available pageshare space (division because of centering)
    var pageshareSpaceAvailable = (windowWidth - siteWidth) / 2;
    // Ensure the minimum available pageshare space as zero
    pageshareSpaceAvailable = (pageshareSpaceAvailable > 0) ? pageshareSpaceAvailable : 0;

    // If the pageshare space available is less than what is needed
    if (pageshareSpaceAvailable <= pageshareSpaceNeeded) {
        // Calculate the left margin needed as the difference between the two
        var leftMarginNeeded = pageshareSpaceNeeded - pageshareSpaceAvailable;

        // Add the left margin needed to the site
        $('#inner-wrapper').css('margin-left', leftMarginNeeded);

        // Modify the pageshare style
        $('#pageshare').css({
            'position': 'absolute'
        });

        // Set the pageshare scroll behavior
        $(window).off('scroll.pageshare');
        $(window).on('scroll.pageshare', function() {
            // Set the bottom to top conversion factor (100% total height - 15% bottom offset = 85% top offset)
            var conversionFactor = 0.85;
            // Calculate the top offset based on the conversion factor and the pageshare height
            var pageshareTopOffset = (conversionFactor * windowHeight) - pageshareHeight;
            // Adjust the pageshare top offset by the current scroll amount
            pageshareTopOffset += $(window).scrollTop();

            $('#pageshare').css({
                'top': pageshareTopOffset + 'px',
                'bottom': 'auto'
            });
        });

        // Trigger the pageshare scroll handler
        $(window).triggerHandler('scroll.pageshare');
    } else {
        // Reset the pageshare style
        $('#pageshare').css({
            'position': 'fixed',
            'top': 'auto',
            'bottom': '15%'
        });

        // Turn off the pageshare scroll behavior
        $(window).off('scroll.pageshare');
    }
}

The last step is to call that method, both on page load and every time the window is resized.

// Adjust the content margin for pageshare container on load
adjustSiteMarginForPageShare();

// When the window is resized
$(window).resize(function () {
    // Adjust the content margin for the pageshare container
    adjustSiteMarginForPageShare();
});