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コンテナーに必要なスペースの量 (幅と左オフセットに基づく) と使用可能なスペースの量 (ウィンドウの幅からサイトの幅を差し引き、負の場合はゼロに正規化) を計算します。メソッドは、これら 2 つの値の差を計算し、その値をサイト コンテナーの左マージンに適用します。これにより、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 に答える