Question

现在，下面的代码会浮动到内容的左侧，当您向下滚动时，它会显示。只要窗口最大化，到目前为止一切都很好。但是当它被最小化或你增加缩放时，条形显示我不想要的内容。在这些情况下（最小化窗口和增加缩放）我希望条形卡在左边距，因此它不会显示在内容上。显然，当向下滚动时（如果窗口最大化），条形图必须保持向左浮动并且可见。要完成此任务，我需要做哪些更改？非常感谢你的支持！

#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;
...
}

Answer 1

您可以使用JavaScript修改主站点容器和pageshare容器的属性来实现此目的。为简单起见，我使用了jQuery。

调整网站边距（jsfiddle）

我创建了一个方法，根据pageshare容器所需的空间量调整网站边距。首先，此方法计算pageshare容器所需的空间量（基于其宽度和左侧偏移量）和可用空间量（从窗口宽度中减去的站点宽度，如果为负，则归一化为零）。然后，该方法计算这两个值之间的差异，并将该值应用于站点容器的左边距。这可确保pageshare容器不会覆盖内容。此外，我设置和删除scroll事件处理程序的原因是，当您向左和向右滚动时，pageshare容器仍将显示在小窗口上的内容上（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');
    }
}

最后一步是在页面加载和每次调整窗口大小时调用该方法。

// 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();
});

最小化时如何调整浮动条

1 个答案: