1

ユーザーがスクロールを開始すると、このウェブサイトのロゴがどのように消えるのか誰か教えていただければ幸いです。左上のロゴを見ると、スクロールし始めると消えてしまいます。これは何と呼ばれる技術ですか？これはjavascriptで行われますか？

http://www.studionudge.com/

前もって感謝します！

4

3 に答える 3

2

いいえ。ロゴは「通常の」コンテナ内に配置され、ページの残りの部分とともにスクロールされます。代わりに、メニューはスクロールしない「固定」メニューになります。さらに、メニューの上にロゴを表示し、その後ろに Web サイトのコンテンツを表示するというトリックが使用されています。今まで見たことのない、とてもいい効果です。

基本的な HTML/CSS コードと実際の例: http://jsfiddle.net/cs7Nk/ :-)

于 2012-05-15T16:27:30.790 に答える
2

cssプロパティを固定するだけで簡単にできます。

例:

<div id="main">
  Test Content
</div>

<div id="content">
  Add some more content here for result.
</div>

<style type="text/css">
  #main {
    width: 100%;
    height: 60px;
    background: green;
    position: fixed;
    z-index: 1000; /* Z-Index for making this div always on top */
  }

  #content {
    width: 960px; margin:0 auto; position: relative; background: blue;
  }

</style>
于 2012-05-15T16:40:20.380 に答える
1

ヘッダーのプロパティが にbackground-attachment設定されていると思いますscroll。

ロゴはヘッダーの一部ではないため (上部に が表示されているだけですz-index)、スクロール効果はありません。

于 2012-05-15T16:30:35.090 に答える