1

Web サーフィン フローティング デザイン要素を含む Web サイトを目にします。しかし、私はそれがどのように呼ばれているかを見つけることができません。誰かが次の要素の名前を知っていますか:

Adobe Web サイトには、「これは役に立ちましたか?」という質問が記載された黄色のボックスがあります。下にスクロールすると、画面の上部にとどまります。 http://www.adobe.com/devnet/fireworks/learning_guide/design/design_guide_pt4.html

詳細についてはどこで確認できますか? ありがとう。

4

4 に答える 4

2

これを行う Sticky sidebar というプラグインがあります。

記事とデモンストレーション

于 2013-02-12T08:56:02.717 に答える
1

その呼ばれる粘着性のあるサイドバー。

これがデモとコードのリンクです。

于 2013-02-12T09:04:25.693 に答える
1

シンプルな css スタイルposition:fixedを使用して、ページがスクロールされたときに要素がビューポート内の場所に留まるようにします。

position:fixedただし、指定したリンクは、ページを一定距離下にスクロールした場合にのみスタイルが適用されるという点で拡張されています。これを実現する最も簡単な方法は、ユーザーが下にスクロールしたときに jQuery を使用して要素のクラスを変更することです。

これは、それに応じてクラスを変更できる関数です。

jQuery(document).ready(function($){
// Check the initial Position of the Sticky Element
    var stickyElementTop = $('#stickyElement').offset().top;

// Apply the CSS class if you scroll past
    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyElementTop ) {
                    $('#stickyElement').addClass('sticky');                      
                } else {
                    $('#stickyElement').removeClass('sticky');                        
            }
    });
}

そして、cssを使用します

#stickyElement{
    position:absolute/relative/whatever;
    }
.sticky{
    position:fixed!important;
    }
于 2013-02-12T11:21:08.353 に答える
1

Sticky jQuery プラグインを見てください。それはあなたが望むことをするべきです。

于 2013-02-12T08:53:40.223 に答える