0

私はついにヘッダー/ナビゲーション領域をスクロールして貼り付けるメニューにすることができました。私が今抱えている唯一の問題は、トランジションを下にスクロールして、ヘッダー/ナビゲーション領域を固定するのが難しい場合です。このサイトのナビゲーションのようなトランジションのようなスムーズなフェードインではありません。

http://www.rodolphecelestin.com/

それらのフェードアウトはさらにスムーズで素晴らしいです。以下のコードにどのコードスニペットを追加する必要がありますか（私はコーダーではありません。したがって、コードが混乱しているように見える場合は、申し訳ありませんが、これまでのところXDで動作するようになりました）?:

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    $(window).scroll(function(e){ 
      $el = $('#header'); 
      if ($(this).scrollTop() > 480 && $el.css('position') != 'fixed'){ 
        $('#header').css({'position': 'fixed', 'top': '0px'}); 
      }
      if ($(this).scrollTop() < 200 && $el.css('position') == 'fixed'){
        $('#header').css({'position': 'relative', 'top': '0px'});
        $('#main-content').css({'margin': '30px 0px 30px'});
        $('#homepage-title').css({'margin-top': '30px'});
      }
      });
    </script>
4

1 に答える 1

0

そのウェブサイトには実際には2つのメニューがあります。1つは上部に固定され、もう1つはスクロールに固定されています。同じことをお勧めしますが、それでも同じメニューを使用したい場合は、追加することをお勧めします

.css('opacity','0').animate({opacity:1},300);

http://jsfiddle.net/rXM7N/1/

于 2013-01-13T00:04:38.333 に答える