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

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

ただいまの
回答率

90.45%

  • JavaScript

    21057questions

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

  • jQuery

    8384questions

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

jQueryで特定の位置でイベント発動

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 358

yes111

score 1

疑似要素に設定したbg画像を切り替えたいです。画面3では別の画像にしたいです。

<div class="para parallax-bg img-bg-04"></div>の部分にきたら
.img-bg-01::beforeを
background: url(../img/bg1.jpg) 50% 100% no-repeat;
から
background: url(../img/bg3.jpg) 50% 100% no-repeat;
にしたいです。

「jQueryを利用して特定の位置に来たらイベントを発火させる」を見て以下を書きましたが動かないです。
書き方が違うのでしょうか。要はパララックス風を作成したのですが、background:attechmentが使えないので疑似要素に背景指定しているのですが、複数あるのでJSで切り替えしないといけなくなった次第です。

<script type="text/javascript">
var thisOffset;
$(window).on('load',function(){
thisOffset = $('.img-bg-01').offset().top + $('.img-bg-01').outerHeight();
});

$(window).scroll(function(){
if( $(window).scrollTop() + $(window).height() > thisOffset){
// 特定の要素を超えた

$(".img-bg-01::before").css("background", " url(img/bg3.jpg) 50% 100% no-repeat");

} else {
// 特定の要素を超えていない
}
});
</script>

以下がHTMLです。

  <div class="content">

        <div class="para parallax-bg img-bg-01">

      <!--<section data-delighter class="splash">
            <p data-delighter class="head01 bottom">魅惑 禁断のオフィスラブ</p>
            <h2 data-delighter class="bottom"> 面接プレイ</h2>
            <p data-delighter class="head02 bottom">応接室で権力を駆使して面接</p>
      </section>
    -->


    </div><!-- /img-bg-01 -->

<!-- /img-bg-01                                                                END             -->

        <div class="para parallax-bg img-bg-02">


            <div class="outer">
          </div><!-- /outer -->



        </div><!-- /img-bg-02 -->



<!-- /img-bg-02                                                                END             -->


        <div class="para parallax-bg img-bg-03">

          <div class="outer">

       <!--    <div class="ser_image"><img src="img/ser1.jpg" alt="面接プレイ"></div>-->

            <h3 class="mar-t5">面接プレイとは</h3>

           <div class="box_intro">

            </div><!-- /box_intro -->




            <div class="box_text">

            </div><!-- /box_text -->

          </div><!-- /outer -->

        </div><!-- /img-bg-03 -->


<!-- /img-bg-03                                                                END             -->



        <div class="para parallax-bg img-bg-04">

          <section data-delighter class="splash">
                <p data-delighter class="head01 bottom">魅惑 禁断のオフィスラブ</p>
                <h2 data-delighter class="bottom">逆面接プレイ</h2>
                <p data-delighter class="head02 bottom">OLからの逆襲</p>
          </section>





        </div><!-- /img-bg-04 -->


<!-- /img-bg-04                                                                END             -->


CSS

html {
    height: 100%;
    margin: 0 auto;
    letter-spacing: 2px;
    font-size: 10px;
}

/*固定する背景*/
div.para {
    box-sizing: border-box;
    color: #FFF;
    font-size: 5rem;

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    padding: 5%;
    min-height: 800px; 
    height: 100%;

}

.img-bg-01 {
    position: relative;
    min-height: 800px; 
}
.img-bg-02 {
    position: relative;
    background:#FFF;


}
.img-bg-03 {
  /*  background: #eee;  */
     position: relative;

     background-image: url('../img/bg.svg');
     background-color: #ddd ;
     z-index: 10;

     background-repeat: repeat;
     background-attachment: fixed;
     background-position: center top

}
.img-bg-04 {
    position: relative;
    min-height: 800px; 

}
.img-bg-05 {
     position: relative;
     background:#FFF;

}
.img-bg-06 {
  /*  background: #eee;  */
     position: relative;
     background-image:  url('../img/bg.svg');
     background-color: #ddd ;
     z-index: 10;

     background-repeat: repeat;
     background-attachment: fixed;
     background-position: center top;

}


.img-bg-01::before{
    content: "";
      display: block;
      position: fixed;
      background: url(../img/bg1.jpg) 50% 100% no-repeat;
      background-size: cover;
      top: 0;
      left: 0;
      width: 100%;
      height: 120%;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
      z-index: -1;

    min-height: 800px; 
}

.img-bg-04::before{
      display: block;
      position: fixed;
      background: url(../img/bg3.jpg) 50% 100% no-repeat;
      background-size: cover;
      top: 0;
      left: 0;
      width: 100%;
      height: 120%;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
      z-index: -5;

    min-height: 800px; 
}

コード
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • miyabi_takatsuk

    2019/06/12 17:31

    JSもコードブロックに記載しましょう。

    キャンセル

回答 2

+2

jQueryは疑似要素を変更できません。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+1

jQueryによるスクロールイベント時の要素位置の取得

jQueryスクロールイベント時要素位置の取得出来ないっぽいですね。多分。。(私英語での調べ&テストより)

ですので、素のJavaScriptのelement.getBoundingClinetRect()を使う他ないと思われます。

擬似要素のプロパティ値を変更する

recalさんが書かれているように、擬似要素をjQueryで変更する事は出来きません。素のJavaScriptでCSSOMを使えばできます。(試しましたが出来ました)。

ただし、英語でもまだMDN等使用書の解説部分やWeb解説記事が充実していない様子でした。
(一応対応箇所のリンクを貼っておきます。ただ、インターフェースという概念やIDL(Interface Definition Language)の知識が必要ですので、まだ未学習でしたら、厳しいかも知れません。)

代替案

ですので、擬似要素の背景画像を変更する替案として、

  • classを追加/削除して、背景画像を変更する

方法をお勧めします。Jsの記述が少なくて済み、簡単だからです。

以上を踏まえて、以下、「質問内容を抽象化したデモ」を以下に書いてみました。
質問コードをコピーして試し、意図を抽象化してみました。

質問した意図と違いましたらごめんなさい…😅💦

<div class="base"></div>       <!-- 背景画像用 -->
<div class="scrollingElement"> <!--  透明な要素。スクロールされる要素 -->
   <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>
</div>
*{
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}
/* 背景のための固定要素 */
.base{
border: 5px solid #555;
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   z-index: -1;
   /*          color       image        position/size  repeat  [origin clip attachment */
   background: transparent url(bg.jpg) left top/cover no-repeat;
}
/* .itemの3番目が見え始めた時に、.baseの背景画像を変えるための追加クラス */
.base.changed{
   background: transparent url(changed.jpg) left top/cover no-repeat;
}

/* スクール用の要素*/
.scrollingElement{
   background: transparent;
   border: 5px solid #888;
}
/* スクロール内の要素 */
.item{
   border: 2px solid red;
   height: 80vh;
   text-align: center;
   line-height: 80vh;
   font-size: 60px;
   color: #fff;
}

/* .item の 3番目の要素のトップに目印用の線 */
.item:nth-of-type(3){
   border-top: 6px solid yellow;
}
// js + jQuery
"use strict";

/* デバッグ用 */
let _ = console.log,
type = v => ({}.toString.call(v));
/***************/


$(window).scroll(function(){
   let item3 = $(".item").get(2); 
   /* 0開始のインデックス。(2)なので3つ目の要素。素のJavaScriptオブジェクト取り出し
    */ 

   let item3Top_FromVP = item3.getBoundingClientRect().top,
   /* viewport からの要素のトップまでの距離(px)。viewportとは、ブラウザのウィンドウの事で、最上左点が基準点。
    * その点からの、あるHTML要素の位置を取得できる。
    * (2) "viewport からの要素位置" なので、スクロールに絡めて、逐次変化する要素の位置を計測できる。 */

   item3Bottom_FromVP = item3Top_FromVP - window.innerHeight;
   /* :: viewportの基準点を左上ではなく、"画面下"にしたい場合::
      画面の高さ分だけマイナスする。
    */


   // item3 のトップが 0以下 === 画面から消え始め
   if( item3Bottom_FromVP < 0 ){
      $(".base").addClass("changed");
   } else {
      $(".base").removeClass("changed");
   }
});

追記

質問のjsのコードも、質問投稿時のバーにある<code>を使って、'コード表示'されるようにして頂けると、回答者も見やすく非常に助かります。

回答者: 見やすい・理解しやすい・コピペの作業が減る
質問者: その結果、回答が得られやすくなる

質問者側も質問文を書く事で精一杯なのは理解しておるつもりです。不躾ではありますが、何卒よろしくお願い致します<(_ _)>🌟

追記2: $("")で、擬似要素は取得できないが、擬似クラス文字列を使って要素は取得できる

もしやこの辺りがややこしいから勘違いもあるかも…と思い、後から追記しました。

擬似要素

$()element.querySelector(all)()に渡すセレクター文字列は、擬似要素・擬似クラスも構文的にはOKです。ただし、仕様書にもありますが、擬似要素の場合は、DOMとして実際に要素が存在するわけでは無いため、例えば、element.querySelector(".foo::before")と記述しても違法にはならず、エラーも投げられません。返却値はnullが返されます。

note: Authors are advised that while the use of pseudo-elements in selectors is permitted, they will not match any elements in the document, and thus would not result in any elements being returned. Therefore, authors are advised to avoid the use of pseudo-elements in selectors that are passed to the methods defined in this specification.

作成者にアドバイスです。セレクタでの擬似要素の使用は許可されていますが、ドキュメント内のどの要素とも一致しないため、結果として要素が返却されません。そのため、この仕様で定義されているメソッドに、疑似要素セレクターを渡す事は避けて下さい。
6.5. Grammar | Selector API lvele2 -W3C-

擬似クラス

擬似クラスは要素が返却されます。ですのでCSSの変更もできます。例コードを以下に。

<div id="foo">this is #foo text.</div>

<div>
   <div class="item">this is 1st item.</div>
   <div class="item">this is 2rd item.</div>
   <div class="item">this is 3rd item.</div>
</div>
.foo::before{
   content: "@@";
}
.item:nth-of-type(2){
   color: red;
}
"use strict";

let _ = console.log,
type = v => ({}.toString.call(v));


let elm = $("#foo");
_( elm.text() ) // this is text.

let secondItemTxt = $(".item:nth-of-type(2)").text(); //
// === let secondItemTxt = document.querySelector(".item:nth-of-type(2)").innerHTML;
_( secondItemTxt ) // this is 2nd item.

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/06/18 08:20 編集

    > ただし、CSSOMは比較的新しい仕様であり、

    相当古い仕様と記憶しています。
    "Previous Versions" を一つ遡っても存在します。
    https://drafts.csswg.org/cssom/
    https://www.w3.org/TR/2016/WD-cssom-1-20160317/

    キャンセル

  • 2019/06/18 12:51

    誤情報、失礼致しました💦 ありがとうございます!!✨ DOM 2 Style(2000年)には既にRECだったとは…全く知りませんでした…😱💦 💦💦 単に、MDNの解説量やWeb解説記事が少ないだけなのですね…。。

    直ぐに修正致します<(_ _)>🌟

    キャンセル

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

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

同じタグがついた質問を見る

  • JavaScript

    21057questions

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

  • jQuery

    8384questions

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