質問編集履歴

2 イメージ画像追加

shiromoco

shiromoco score 13

2017/06/22 17:26  投稿

特定要素が画面上部にきたら背景がスクロールについていかずに固定されるようにしたい
レスポンシブサイトで特定要素の背景が画面上部にきたらスクロールについていかずに固定されるようにしたいです。
下図のようなページがあった時に2のように要素Bがヘッダーの下にくっついたら赤色背景が固定されるような動きをつけたいと考えています。
(要素A、要素B、要素Cの高さはそれぞれ異なります)
1)要素Bはヘッダーにくっついていないので赤色背景もスクロールについてくる
![ページイメージ1](14906182aabd061e431bb3ff3a7a01c0.png)
![ページイメージ1](cc5ed5b0c1dad708c75155e84a8a18d9.png)
2)要素Bがヘッダーにくっついたので赤色背景はスクロールについてこなくなる(位置が固定される)
![ページイメージ2](9563809af05a56a55461cf5e879c6b76.png)
![ページイメージ2](3947010a3f35a4b80b094b8f6fbbc446.png)
3)スクロールを続けると要素Bの赤背景が固定されたまま要素Cが要素Bの赤背景の上を通り過ぎる
![ページイメージ3](bef283bf3f0fd8c994f92f647890c575.png)  
background-attachment:fixed がスマホでは使えないようなので、
HTMLにimgで画像を入れて背景画像のように見せながらヘッダーにくっついたらクラス名「fixed」を追加して「position:relative;」を「position:fixed;」に変更する
という方法を試してみましたが、画面に固定される時にビクッと動いてしまい動きがぎこちなくなってしまったり、スマホでは画像が変に拡大されてしまったりしてしまいました。
```Javascript
   $(function() {
       var $win = $(window);
       var windowWidth = window.innerWidth;
       if (windowWidth > 600) {
           $(window).on('load resize scroll', function() {
               var windowYF = $(window).scrollTop() + $('.bg__fix').height();
               $('.bg__fix').each(function() {
                   var diffYF = windowYF - $(this).offset().top + 80;
                   if (diffYF > $(this).height()) {
                       $(this).addClass('fixed');
                   } else if (diffYF > 0) {
                       $(this).removeClass('fixed');
                   }
               });
           });
       } else {
           $(window).on('load resize scroll', function() {
               var windowYF = $(window).scrollTop() + $('.bg__fix').height();
               $('.bg__fix').each(function() {
                   var diffYF = windowYF - $(this).offset().top + 50;
                   if (diffYF > $(this).height()) {
                       $(this).addClass('fixed');
                   } else if (diffYF > 0) {
                       $(this).removeClass('fixed');
                   }
               });
           });
       }
   });
```
[https://github.com/Prinzhorn/skrollr](https://github.com/Prinzhorn/skrollr)
また、こちらのプラグインを使用して実現できないかと考えたのですが、私の入れ方が悪いのかこのプラグインを導入すると独自に実装したJSがタブレットやスマホで動かなくなってしまったり、bodyの高さ取得がおかしくなってしまいページ下部に余白ができたろしてしまいます。
動かなくなるJS
[https://teratail.com/questions/77289](https://teratail.com/questions/77289)
別の方法で実装できないかと思い調べてみたのですが、スマホでは動かなかったりしてなかなか良い方法を見つけられません。
おすすめの実装方法を教えていただけないでしょうか?
対応ブラウザは下記を想定しています。
・IE9以上(IE9は背景が固定されていなくてもOK)
・Chrome、Firefox、スマホ、タブレットは各最新版
何卒よろしくお願いいたします。
  • JavaScript

    21476 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • CSS

    8055 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • jQuery

    8546 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1 わかりにくい画像を削除

shiromoco

shiromoco score 13

2017/06/22 17:14  投稿

特定要素が画面上部にきたら背景がスクロールについていかずに固定されるようにしたい
レスポンシブサイトで特定要素の背景が画面上部にきたらスクロールについていかずに固定されるようにしたいです。
下図のようなページがあった時に2のように要素Bがヘッダーの下にくっついたら赤色背景が固定されるような動きをつけたいと考えています。
(要素A、要素B、要素Cの高さはそれぞれ異なります)
1)要素Bはヘッダーにくっついていないので赤色背景もスクロールについてくる
![ページイメージ1](14906182aabd061e431bb3ff3a7a01c0.png)
2)要素Bがヘッダーにくっついたので赤色背景はスクロールについてこなくなる(位置が固定される)
![ページイメージ2](9563809af05a56a55461cf5e879c6b76.png)
3)要素Bの赤背景が固定されたまま要素Cが要素Bの赤背景の上を通り過ぎる
![ページイメージ3](a0302912dc51cd88d6f410a6be1ad7b5.png)
3)スクロールを続けると要素Bの赤背景が固定されたまま要素Cが要素Bの赤背景の上を通り過ぎる
background-attachment:fixed がスマホでは使えないようなので、
HTMLにimgで画像を入れて背景画像のように見せながらヘッダーにくっついたらクラス名「fixed」を追加して「position:relative;」を「position:fixed;」に変更する
という方法を試してみましたが、画面に固定される時にビクッと動いてしまい動きがぎこちなくなってしまったり、スマホでは画像が変に拡大されてしまったりしてしまいました。
```Javascript
   $(function() {
       var $win = $(window);
       var windowWidth = window.innerWidth;
       if (windowWidth > 600) {
           $(window).on('load resize scroll', function() {
               var windowYF = $(window).scrollTop() + $('.bg__fix').height();
               $('.bg__fix').each(function() {
                   var diffYF = windowYF - $(this).offset().top + 80;
                   if (diffYF > $(this).height()) {
                       $(this).addClass('fixed');
                   } else if (diffYF > 0) {
                       $(this).removeClass('fixed');
                   }
               });
           });
       } else {
           $(window).on('load resize scroll', function() {
               var windowYF = $(window).scrollTop() + $('.bg__fix').height();
               $('.bg__fix').each(function() {
                   var diffYF = windowYF - $(this).offset().top + 50;
                   if (diffYF > $(this).height()) {
                       $(this).addClass('fixed');
                   } else if (diffYF > 0) {
                       $(this).removeClass('fixed');
                   }
               });
           });
       }
   });
```
[https://github.com/Prinzhorn/skrollr](https://github.com/Prinzhorn/skrollr)
また、こちらのプラグインを使用して実現できないかと考えたのですが、私の入れ方が悪いのかこのプラグインを導入すると独自に実装したJSがタブレットやスマホで動かなくなってしまったり、bodyの高さ取得がおかしくなってしまいページ下部に余白ができたろしてしまいます。
動かなくなるJS
[https://teratail.com/questions/77289](https://teratail.com/questions/77289)
別の方法で実装できないかと思い調べてみたのですが、スマホでは動かなかったりしてなかなか良い方法を見つけられません。
おすすめの実装方法を教えていただけないでしょうか?
対応ブラウザは下記を想定しています。
・IE9以上(IE9は背景が固定されていなくてもOK)
・Chrome、Firefox、スマホ、タブレットは各最新版
何卒よろしくお願いいたします。
  • JavaScript

    21476 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • CSS

    8055 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • jQuery

    8546 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る