0

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

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

1 回答 1

0

您可以通过使用 JavaScript 修改主站点容器和容器的属性来完成此操作pageshare。为简单起见，我使用了jQuery。

调整站点边距 ( jsfiddle )

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

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();
});
于 2013-02-19T20:58:25.783 回答