jquery - スクロール時に画像を移動

Question

ページをスクロールしたときとトップページにヒットしたときに画像モードにする方法を教えてください。トップページをスクロールしても消えることなくレート矢印が上下に移動するようにしたいです。

ところで、私は動きにJQueryを使用しています

  <div class="FirstChildBox">
                <div class="imageBox">
                       <img src="textimage2.jpg" id="imageBoxImg"/>
                    <form>
                            <label class="Image1BoxLabel"><input type="checkbox"/>Image1</label>
                        <label class="Image1BoxLabel"><input type="checkbox"/>Image1</label>
                        <label class="Image1BoxLabel"><input type="checkbox"/>Image1</label>1
                        </form>
                        <a href="#">Enemy1</a>
                </div>
                <div class="rateImage">
                    <div class="arrowupdownrate">
                        <div class="upArrow" id="upArrow"><img src="up_down.png" /> </div>
                        <div class="rateNumber"><a>112320</a></div>
                        <div class="downArrow" id="downArrow"><img src="red_down.png" /></div>
                    </div>
                </div>

    </div>

Answer 1

最も近い親rateImageの右上隅に固定します。relativeこの場合、ドキュメント。

.rateImage {
  position: absolute;
  top: 10px;
  right: 10px;
}

または、次を使用できます。

.rateImage {
  position: fixed;
  top: 10px;
  right: 10px;
}

私が好むposition: absolute;のは、長期的にはより柔軟になるという理由だけです。この場合は特に問題ありません。

Answer 2

Give position: rate div に固定

.rateImage {
 position: fixed;
}

Answer 3

upArrowおよびdownArrowcss クラスに以下を追加します。

position: fixed