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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Q&A

解決済

1回答

3177閲覧

Angularにおいて、メインメニューと本体上部ボタンをまとめてスクロール固定にする方法を教えてください

halohalolin

総合スコア46

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

0グッド

0クリップ

投稿2019/01/28 06:16

Angular7.2.3で質問です。

イメージ説明

メインメニューの選択によって本体部がそれぞれ変化します。
そして本体の上部には操作ボタンを設置したいと考えています。
メインメニューと操作ボタンはスクロール固定とし、本体コンテンツのみスクロールさせたいと考えています。
ですが、操作ボタンも含めて上部スクロール固定にする方法が分かりません。
参考になるページ等ご存知の方よろしくお願いします。

ヘッダーメインメニューコンポーネント内に各本体の操作ボタンを全てもうけ、sticky-topでまとめるというのも考えました。
ですが、メインメニューコンポーネントが複雑になるんじゃないか・・・もっとすっきりとした書き方があるのではないかと迷っています。
(可能であれば各本体内に操作ボタンに関するコンポーネントを設けたいです、保守しやすそうなので。)

http://q.hatena.ne.jp/1548655546 とは同じ質問者です。

以上よろしくお願いいたします。

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

メインメニューの高さが変化しないならposition:fixedとかはダメでしょうか

こういうのはspectrumのAngularユーザーグループとかで聞くともっとAngularに詳しい人が答えてくれるかもしれませんね。

もしくは

本体を操作と表示の二つのコンポーネントにわけて、
表示は操作をサービス経由でサブスクライブして
ボタンが押されたときにメソッド発火。

そして上部に固定されるだけのHeaderてきなコンポーネントをつくって
メインメニューと操作をその子にすれば

操作もメインメニューも画面上部に固定され、
かつ操作によって表示が変化し
メインメニューが膨らむこともないです。

「各本体内に操作ボタン」は満たせていませんしSubjectとかサービスとかで大げさになってしまいますが…

投稿2019/02/13 13:52

user14

総合スコア125

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

halohalolin

2019/02/19 11:03

area-bさんありがとうございます、返答遅れてすみません。 基本的にメインメニューの高さは変わらないのですが、ウインドウ横サイズによる変化は発生する予定なので、position:fixedで上手くいくか気になります。 > 本体を操作と表示の二つのコンポーネントにわけて、 > 表示は操作をサービス経由でサブスクライブして > ボタンが押されたときにメソッド発火。 メインメニューと各本体部分の操作部分の寄せ集めをヘッダーコンポーネントでまとめて、本体のコンテン部分と分離した本体部分の操作をサービス経由でやり取りする案と理解しました。 確かにそれで動作しそうですね。 ・・・ただ構成が難しそうで、しばらくしてソースを見返したら思い出すのに苦戦しそうですが、それは仕方がないところなのでしょうか?
user14

2019/02/20 11:07

正直私もこの回答のやり方はちょっとな…とは思います笑 もっと詳しい人に聞けば綺麗なやり方がありそうですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問