1

私のヘッダーは中央に920pxの幅に設定されており、ヘッダーの下のコードを使用すると固定され、ユーザーがスクロールすると不透明度が変わります。変更が瞬時に発生する場合でも、目的の効果はかなり簡単に達成できました。変更を所定の位置にフェードインさせることができるかどうか疑問に思っていますか？運が悪かったので、CSS3トランジションを使ってみました。

      <script>
  $(function() {

    // grab the initial top offset of the navigation 
    var sticky_navigation_offset_top = $('header').offset().top;

    // our function that decides weather the navigation bar should have "fixed" css position or not.
    var sticky_navigation = function(){
        var scroll_top = $(window).scrollTop(); // our current vertical position from the top

        // if we've scrolled more than the navigation, change its position to fixed to stick to top,
        // otherwise change it back to relative
        if (scroll_top > sticky_navigation_offset_top) { 


            $('header').css({ 'position': 'fixed', 'position': 'fixed', 'opacity':0.8,  'top':0, 'left':0 });

        } else {
            $('header').css({ 'position': 'relative' }); 
        }   

    };

    // run our function on load
    sticky_navigation();

    // and run it again every time you scroll
    $(window).scroll(function() {
         sticky_navigation();
    });

});
  </script>

ありがとう。

4

1 に答える 1

0

スタイルを2つの別々のクラスに配置し、jQuery UIのswitchClass（）を使用できます。

switchClass（remove、add、[duration]）

オプションの遷移を使用して、最初の引数で定義されたクラスから2番目の引数として定義されたクラスに切り替えます。

いくつかのスタイルクラスを追加します。

style1{
    position: fixed;
    opacity: 0.8;
    top: 0;
    left: 0;
}

style2{
    position: relative;
}

それらを切り替えます：

if (scroll_top > sticky_navigation_offset_top) {
    $('header').switchClass("style2", "style1", 300);
} else {
    $('header').switchClass("style1", "style2", 300);
}​

または、CSS3変換をさらに調べることもできます。私はまだそれらを使用していませんが、彼らはあなたが必要とするものを達成することができるかもしれません。

于 2012-09-17T23:46:09.060 に答える