質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.98%

ページをスクロールした際に、ヘッダーの文字だけ表示したい。

受付中

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 1,735

YousukeTanaka

score 70

お世話になります。

現在、Web制作を学習中で、サイトを作成しています。
そして、以下のような機能を付けたいと考えていますが、つまずいています。

「ページをスクロールしすれば、ヘッダーが現れ、ページトップでは、ロゴと文字だけを
表示する」

①問題は、ページトップでは、ロゴと文字もヘッダーと一緒に表示されないということです。
スクロールすると問題なくヘッダーは表示されます。jQueryは以下のように作成しました。


$(function () {
  $(window).on("scroll", function () {
    if ($(this).scrollTop() > 0) {
      $("header").slideDown();
    } else {
      $("header").slideUp();
    }
  });

});

②スクロールするに従って、添付サンプルのようにヘッダーのナビが黄色く表示され、
セクションごとに移動するようにしたいと思っています。
イメージ説明
2-1. ここで、現在、この色がデフォルトでグレーなので、見やすいようにサンプルと同じ
黄色にしたいと考えています。この色の変更はどのようにするべきでしょうか?

2-2. また、同様に、サンプルでは、移動する際、黄色い表示ボックスがヘッダーの
内側で四角(角は丸く)に表示されていますが、デフォルト状態ではヘッダーの
ボーダーとボックスの境とに余白はありません。ヘッダーの
ボーダーとボックスの境とに余白を作りたいのですが、どのように調整すれば
よいでしょうか? これも上記のjQueryに関するものだと思うのですが、
よくわかりません。

結局サンプルのようなものを一度作りたいと考えています。
どうぞ宜しくお願い致します。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

+1

こんにちは。

すいません、ソースがjavascriptしかないので、具体的にこうとは答えられませんでした。

①に関して
  間違ってたらすいません。
  多分、こちらのページの「2.スクロールするとヘッダーに固定表示(アニメーションバージョン)」の
  ようなやり方でいけると思います。
  jQueryでスクロールすると表示する系いろいろ(WEB PIXEL より)
  
  この手のやり方はググると結構でてくるので、お好みの方法を見つけてみるといいかもしれません。
  便利なプラグインもあるようです。

②に関して
  メンテナンスしやすいように、色とかデザインに関することは
  スタイルシートで実装したほうがよいと思います。
  
  > 2-1. ここで、現在、この色がデフォルトでグレーなので、見やすいようにサンプルと同じ 
  > 黄色にしたいと考えています。
  正直、サンプルがどれを指しているのか分かりませんでした。。画像全体がサンプルなのであれば、
  ヘッダー部を黄色にすると、画像で黄色くなっている「SERVICES」とかの部分が
  区別つかなくなるのではと思うのですが。。。
  
  2-1
    ヘッダーでも、選択部でも、ベースの色を変えたいのであれば、
    スタイルシートの「background-color」で変更することができますよ。
    CSS - background-color(「とほほのWWW入門」スタイルシート(CSS) より)
    
  2-2
    ヘッダーとボックスとの間に隙間をつくるのであれば、
    スタイルシートの「margin」でできると思います。
    ただ、heightなどのサイズを指定してしまっているとうまく制御できない可能性もあります。
    CSS - margin(「とほほのWWW入門」スタイルシート(CSS) より)

がんばってください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/07 10:43

    回答ありがとうございました。やはり、色やボックスのサイズはcssで対処するのですね。どこで何をするかが明確になりました。ありがとうございます。

    キャンセル

  • 2015/09/08 10:21

    jQueryからでも色などは変えられますが、CSSに分けておけばあとで修正するときに分かりやすいかなと。
    もちろん、場合によりけりなので、必要に応じて・・・ってことで。

    ちなみに、jQueryでは、「.css()」で指定すれば変えられます。
    http://www.buildinsider.net/web/jqueryref/005

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.98%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる