質問: お世話になっております。 機能としては、 ・コンテンツをスクロール表示 ・画面下部にタブバーを配置し、「前のページ」「次のページ」等でコンテンツ内容を切り替える このようなアプリなのですが、 タブバーが固定されずコンテンツのスクロールに付いてきてしまいます。 解決法、対処法等ご教授願います。 ※該当箇所(ページ)のみの最小限のコードにしてあります。 タブバー部分のonClick関数には、 現在表示中のコンテンツの1つ前、1つ後のキーが動的に渡される仕組みになっています。 **index.html** ``` 左右 コンテンツ21こんにちは。ここに内容が書かれます。2こんにちは。ここに内容が書かれます。3こんにちは。ここに内容が書かれます。4こんにちは。ここに内容が書かれます。5こんにちは。ここに内容が書かれます。6こんにちは。ここに内容が書かれます。7こんにちは。ここに内容が書かれます。8こんにちは。ここに内容が書かれます。9こんにちは。ここに内容が書かれます。10こんにちは。ここに内容が書かれます。11こんにちは。いここに内容が書かれます。 ``` **追記 2016/04/01** 暫定対応できたので追記します。 user13314さんのコメントから、``での実現が不可能と判断し ``タグ等やスタイルを使った方法に変更することにしました。 下記のページをほぼそのまま使わせていただき、タブバー風に画面下部に固定することに成功しました。 変更点 ・css/style.cssファイルに上記サイトのcss部分を追記。 ・index.htmlの``の部分を下記のように変更。(jQueryは使用せず。) ``` 左右 コンテンツ21こんにちは。ここに内容が書かれます。2こんにちは。ここに内容が書かれます。3こんにちは。ここに内容が書かれます。4こんにちは。ここに内容が書かれます。5こんにちは。ここに内容が書かれます。6こんにちは。ここに内容が書かれます。7こんにちは。ここに内容が書かれます。8こんにちは。ここに内容が書かれます。9こんにちは。ここに内容が書かれます。10こんにちは。ここに内容が書かれます。11こんにちは。いここに内容が書かれます。 トップ 前のページ 次のページ ```
回答: 各コンテンツは別ファイルかテンプレートとして分けた方がよいと思います。 ``` 左右 コンテンツ21こんにちは。ここに内容が書かれます。2こんにちは。ここに内容が書かれます。3こんにちは。ここに内容が書かれます。4こんにちは。ここに内容が書かれます。5こんにちは。ここに内容が書かれます。6こんにちは。ここに内容が書かれます。7こんにちは。ここに内容が書かれます。8こんにちは。ここに内容が書かれます。9こんにちは。ここに内容が書かれます。10こんにちは。ここに内容が書かれます。11こんにちは。いここに内容が書かれます。 ```