1

ページ上に固定位置要素があります。その要素を、割り当てたIDまたはクラスの特定のdivタグ内に含める必要があります。これが例のあるフィドルです。この例では、フローティングバーがブラックボックスの上または下に配置されないようにする必要があります。

jQueryを使用して関数を変更してもかまいません。v.1.8.3を使用しています。

ここに私が求めているものの例を示すサイトとして。左側を見てください。

例のコードは次のとおりです。

HTML

<div class="wrapper">
<div class="top">
    <p>&nbsp;</p>
</div>
<div class="container">
<p>Floating Bar Should not go above this point.</p>

<p>&nbsp;</p>

</div>
<p>Floating Bar Should not go below this point.</p>
    <p>&nbsp;</p>

</div>

    <div class="add-this-container" >
    <!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js">   </script>
<!-- AddThis Button END -->
</div>

CSS

.wrapper{
    height:1500px;
    background: #808080;
    width: 300px;
}
.container{
    background: #111;
    height: 600px;
}
.top{
    height: 400px;
    background: #7e0000;
}
.add-this-container{
position: absolute;
    left: 350px;
    top: 250px;
}
.addthis_floating_style{
    background: #ccc;
 }
p{
    color: white;
}
4

3 に答える 3

3

位置（ヘッダーとフッター）を取得するために、HTMLにいくつかのIDを追加しました

<div class="wrapper">
    <div class="top">
        <p>&nbsp;</p>
    </div>
    <div class="container">
    <p id="header">Floating Bar Should not go above this point.</p>

    <p>&nbsp;</p>

    </div>
    <p id="footer">Floating Bar Should not go below this point.</p>
        <p>&nbsp;</p>

</div>

<div class="add-this-container" >
        <!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"></script>
<!-- AddThis Button END -->
</div>

この小さなスクリプトは、フローティング div がヘッダーまたはフッターのブレークオフ ポイントに達すると停止します。私は、スクリプトがいつ、何をするかを理解するのに役立つように、スクリプトを少し「鼻の上」にしました。少しきれいにすることができます。おそらく、位置の変更をアニメーション化します。

$(function(){

    //Scroll event, sets position on scroll
    $(document).scroll(function() { 
        position();        
    });

    // Set initial position on document ready
    position();
});


function position()
{
            //Collect positions
        var floaterHeight = $('.addthis_floating_style').height();
        var headerBreakoff = $('#header').offset().top + $('#header').height();
        var footerBreakoff = $('#footer').offset().top;

        var newTop = $(document).scrollTop() + 20; // this will be position when between header and footer        

        if(newTop <= headerBreakoff) // Above header
        {        
            newTop = headerBreakoff;
        }
        else if(newTop + floaterHeight >= footerBreakoff) // Below footer
        {
            newTop =  footerBreakoff - floaterHeight;
        }

        //Set position
        $(".addthis_floating_style").offset({ top: newTop});
}

ここにフィドルがあります

http://jsfiddle.net/urbanbjorkman/BJ6EP/

于 2013-01-27T09:08:38.037 に答える
1

jQuery 関数をウィンドウ スクロールにアタッチし、設定した境界の上または下に重なる div を確認します。重複する場合は、固定位置要素から、指定された境界でキャップされた規則的に配置された要素にするクラスを追加または削除します。ユーザーがスクロールして元の位置に戻すと、再び「浮き」ます。

于 2013-01-27T04:11:21.463 に答える
0

偶然にも、これを行う jQuery プラグインに出くわしました。ここにあるのは「Sticky Floating Box」と呼ばれるものです。

于 2013-02-25T22:20:11.427 に答える