Mashable

は、ユーザーがページをスクロールしている間に素晴らしい浮動効果を作り出しました。 jQueryを使ってこの浮動エフェクトを複製する方法を簡単に説明します。


image、title = "Mashable-floating-effect-example"

アイデア…​

  1. フローティングボックスを作成します.

  2. フローティングボックスの位置を最初に設定し、ボディコンテンツの横に置きます.

  3. ユーザーがページをスクロールしている間は、スクロールバーの位置を確認してください.

  4. スクロールバーのyの位置がフローティングボックスyより大きい場合

位置、フローティングボックスyの位置を動的に変更します。

  1. スクロールバーyの位置はフローティングボックスyより小さい

位置、元の位置を復元します。

  1. もちろん、jQueryを使用してください.

1. HTMLレイアウト

シンプルなHTMLレイアウト、ヘッダー、コンテンツ、およびフッターは、コンテンツの上にdivの「フローティングボックス」を配置します。

<div id="page">
    <div id="header"><h1>header</h1></div>
    <div id="floating-box"></div>
    <div id="body">
        <h1>content</h1>
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-2836379775501347"
     data-ad-slot="8821506761"
     data-ad-format="auto"
     data-ad-region="mkyongregion"></ins>
<script>
(adsbygoogle = window.adsbygoogle ||[]).push({});
</script><h2>Mashable floating effect example</h2>
    </div>
    <div id="footer"><h1>footer</h1></div>
</div>

2.フローティングボックス90×200

これは、人々が箱をスクロールしながら円滑に浮動する箱です。

必要に応じて

“margin-left:-100px;

“を調整する必要があります。

#floating-box{
    width:90px;
    height:200px;
    border:1px solid red;
    background-color:#BBBBBB;
    float:left;
    margin-left:-100px;
    margin-right:10px;
    position:absolute;
    z-index:1;
}

3.矛盾はありません.

jQueryが他のライブラリと競合していないことを確認してください。それを確認することを強くお勧めします。

   //avoid conflict with other script
    $j=jQuery.noConflict();

    $j(document).ready(function($) {

4.位置、位置、位置

jQuery scroll()イベントをバインドして、ブラウザのスクロールバーの位置を確認し続けます。

$(window).scroll(function () {

    var scrollY = $(window).scrollTop();
    var isfixed = $floatingbox.css('position') == 'fixed';

    if($floatingbox.length > 0){

        if ( scrollY > bodyY && !isfixed ) {
            $floatingbox.stop().css({
                position: 'fixed',
                left: '50%',
                top: 20,
                marginLeft: -500
            });
        } else if ( scrollY < bodyY && isfixed ) {
            $floatingbox.css({
                position: 'relative',
                left: 0,
                top: 0,
                marginLeft: originalX
            });
        }
    }
});

スクロールバーのy位置がフローティングボックスのy位置より大きい場合、フローティングボックスのy位置を ”

marginLeft:-500

“に変更します。

必要に応じてこの値をカスタマイズする必要があります。

    if ( scrollY > bodyY && !isfixed ) {
       $floatingbox.stop().css({
        position: 'fixed',
        left: '50%',
        top: 20,
        marginLeft: -500
       });
     }

スクロールバーのy位置がフローティングボックスのy位置よりも小さい場合は、元の位置に戻します。

        if ( scrollY < bodyY && isfixed ) {
       $floatingbox.css({
        position: 'relative',
        left: 0,
        top: 0,
        marginLeft: originalX
       });
    }

5.完了

以下の例を試して、作品のアイデアを得てください。

__P.Sこの浮動エフェクト機能は、私の

DiggDigg WordPress plugin

で実装されています。

自分で試してみてください

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<style type="text/css">
    #floating-box{
        width:90px;
        height:200px;
        border:1px solid red;
        background-color:#BBBBBB;
        float:left;
        margin-left:-100px;
        margin-right:10px;
        position:absolute;
        z-index:1;
    }
    #page{
        width:800px;
        margin:0 auto;
    }
    #header{
        border:1px solid blue;
        height:100px;
        margin:8px;
    }
    #body{
        border:1px solid blue;
        height:2400px;
        margin:8px;
    }
    #footer{
        border:1px solid blue;
        height:100px;
        margin:8px;
    }
    h1,h2{
        padding:16px;
    }
</style>

</head>
<body>

  <div id="page">
    <div id="header"><h1>header</h1></div>

    <div id="floating-box">

    </div>

    <div id="body">
        <h1>content</h1>
        <h2>Mashable floating effect example</h2>
    </div>
    <div id="footer"><h1>footer</h1></div>
  </div>


<script type="text/javascript">

   //avoid conflict with other script
    $j=jQuery.noConflict();

    $j(document).ready(function($) {

   //this is the floating content
    var $floatingbox = $('#floating-box');

    if($('#body').length > 0){

      var bodyY = parseInt($('#body').offset().top) - 20;
      var originalX = $floatingbox.css('margin-left');

      $(window).scroll(function () {

       var scrollY = $(window).scrollTop();
       var isfixed = $floatingbox.css('position') == 'fixed';

       if($floatingbox.length > 0){

          $floatingbox.html("srollY : " + scrollY + ", bodyY : "
                                    + bodyY + ", isfixed : " + isfixed);

          if ( scrollY > bodyY && !isfixed ) {
            $floatingbox.stop().css({
              position: 'fixed',
              left: '50%',
              top: 20,
              marginLeft: -500
            });
        } else if ( scrollY < bodyY && isfixed ) {
              $floatingbox.css({
              position: 'relative',
              left: 0,
              top: 0,
              marginLeft: originalX
        });
         }
       }
       });
     }
  });
</script>
</body>
</html>

リンク://wp-content/uploads/jQuery/jQuery-Mashable-floating-effect-example.html[デモを試してください]