【jQuery】コピペでスクロール値を常に画面に表示させる

javascript
この記事は約31分で読めます。
スポンサーリンク

スクロールアニメーションを作る時に、スクロール値をコンソールで確認するのも良いけど
そうするとHTMLやCSSがブラウザ上で編集しずらくなる。

それなら画面にスクロール値だけ表示しておけば便利じゃん!と思いました。

でもこれ最終的に消しちゃうから、いちいちコーディングするのって手間じゃん。
コピペで済ませちゃおう!

右上と右下に表示されてるpx表示がデモになります。
ブラウザの1番上を基点にした表示と、下を基点としたスクロール値を表示しています。
下の基点はウィンドウの高さをスクロール値に足した数値になります。
ウィンドウを可変させても、対応しているので使いやすい。

矢印をSVGで表示しているのでHTMLが多少見辛いですが要らなかったら消してくださいね!

【HTML】

<div class="scroll-value-ue">
  <span>0</span>px
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 575.58 577.6">
    <path d="M575.45,540.58c-.79-2.17-2.1-3.83-1.48-7.41a16.88,16.88,0,0,0-8.15-2.22h-.74c-2.4-1.55-3.24-4.66-5.92-5.93-21.26-1.07-40.49-7.21-60.73-3.7-3.64.68-6.45-2.15-8.15.74h-.74c-1.26-1.69-5.65-.27-8.14-.74a2.77,2.77,0,0,0-3.71,0h-7.4c-10.41-3.91-22.85-5.78-33.33-9.63h-.74c-.11-1.62-1.86-1.59-3.7-1.48-2.16-2-4.47-3.92-8.15-4.44h-.74a16.59,16.59,0,0,0-8.88-5.19H414c-2.24-3.19-6.61-4.26-8.89-7.4-1.42-1.79-3.48-2.94-5.18-4.45V488c-2.6-3.57-6.95-5.4-9.63-8.88h-.74c-2.08-2.61-4.81-4.57-7.41-6.67v-.74a42.14,42.14,0,0,0-7.4-7.4c-.55-3.41-3.22-4.69-5.19-6.67a8.19,8.19,0,0,0-3.7-5.18v-.74c-.71-1.52-1.51-2.93-2.22-4.45-1.26-4.67-5.86-6-6.67-11.1,9.31-3.78,19.28-6.9,24.44-14.82,2.85,2.19,7.78,1.62,9.63,0,.53-2.2-2.32-1-1.57-3.43l.23-.11.53-.25h0a2.84,2.84,0,0,0,2.29-1.39h.74c4.91-1.76,7.68-5.65,12.59-7.4-3.19,3-6.3,6-9.63,8.88,14.38-2.92,21.36-19.6,31.85-28.88V388c2.54-1.9,4.9-4,5.92-7.41,1.49-1.23,3.45-2,3.71-4.44,2.13-.33,1.75-3.19,3.7-3.7v-.75c-.17-1.39.83-1.63.74-3,.94-1.28,2.5-1.94,2.22-4.44,1.07-.17.26-2.21,1.48-2.22v-.74c1.07-3.87,3.63-6.25,3.7-11.11,1.28-5.14,5-7.84,5.19-14.07v-1.49c1.45-1.26.23-5.19,2.22-5.92h.74v-3c1.23-1.28,1.23-7.61,0-8.89V314.7c-.27-6.4-1.84-11.49-3-17v-1.48a8.06,8.06,0,0,1-3.71-4.45c-1.09-1.62-1.44-4-3-5.18v-.74c-1.38-3.8-4.61-5.76-7.4-8.15.12-2.59-2.61-2.33-3.71-3.7-.32-.66-.65-1.33-1.48-1.48-.18-1.31-1.27-1.69-3-1.48-4.12-3-7.19-7.13-11.85-9.63h-.74c-.63-1.1-1.86-1.59-3.7-1.48-2.43-2.76-7.06-3.31-11.11-4.44h-.74c-17.28-10.37-33.15-22.15-55.54-27.41-1.61-1.67-2.53.62-5.19,0-1.76-1.23-8.61-1.23-10.37,0h-3.7c-.19,1-1.62.85-2.22,1.48-5.71,1-10.83,2.5-13.33,6.67a32.13,32.13,0,0,1,8.75-2.95,4.52,4.52,0,0,0,.77-.09h.06a6.36,6.36,0,0,0,.66-.18h0a101.41,101.41,0,0,1,10.49-1.21c1.18-.07,2.83.35,3-.74,4.36-.67,8.61,1.9,11.11.74,2.48.23,3,2.48,3.7,4.44a11.1,11.1,0,0,1-2.77,1.26h0c-1.57.19-3.18.32-4.81.41h0c-3.14-.32-6.23-1.46-9.45-1.67-11.49-.74-23.7,4.9-33.7,8.53a7.69,7.69,0,0,0-1.86.66c-1.27.44-2.51.85-3.69,1.18.69,5.33,5.61,2.37,8.14,3V251c-3.24,3.67-8.06,5.76-9.63,11.11v.74c-8.6,5.72-14,14.63-20.73,22.22v.74c-1.51.71-1.6,2.84-1.48,5.18-.47,2.49.95,6.88-.74,8.15v4.44a14.87,14.87,0,0,0-.74,8.89c-2.36,3.07-2,8.91-3.71,12.59-.14,3.1,3.64,2.29,3,5.92-2.37.35-2.61,2.82-5.18,3v-4.45c-2,.13-1,3.36-3.53,3l-.29-.16-.07,0c-2.51-2.07-3.57-5.57-6.48-7.24H254c-1.65-4.27-4.75-7.1-8.14-9.63v-.74c-2.07-2.62-3.74-5.64-6.67-7.41-5-7.85-10-15.62-15.55-23-2.38-4.29-2.86-10.48-6.67-13.33.31-1.79-1.35-1.61-.74-3.71a42.66,42.66,0,0,1-3-8.88c-.45-3-2.55-4.36-2.22-8.15-1.22,0-.42-2.05-1.48-2.22a14,14,0,0,0-3-5.18c-.24-5.93-4.13-8.21-5.18-13.34-1.09-1.62-1.44-4-3-5.18v-1.48c-.85-.88-.84-2.62-.74-4.44-.13-1.11.26-2.74-.74-3v-11.1c1.09-.14.68-1.79.74-3V197c.86-3.61-1.39-7.95,0-9.63v-7.4c.45,0,.87-.11.74-.75v-8.88c1.69-1,.28-5.16.74-7.41V161.4c1.67-.55.29-4.15.74-5.92v-9.63h-.74v-1.48c1.67-.55.29-4.16.74-5.93s-.93-5.37.74-5.92c5.92,2.71,8.11,9.17,16.29,9.63a3.53,3.53,0,0,0,2.22.74,2.05,2.05,0,0,0,2.23,1.48,31.21,31.21,0,0,0,11.11,8.89c.65.32,1.32.65,1.48,1.48h2.22v.74c2.87,2.3,6.95,3.41,10.37,5.18h3c.56,3.15,5.65,1.75,6.66,4.44H260c.95,1,3.21.74,5.18.75,2.85,2.44,7.94-1.28,10.37.74h.74c1.09,2.14,6.08,4.25,8.89,2.22.63-.14.69.29.74.74h1.48c1.05.17,1.25,1.22,2.22,1.48a13.76,13.76,0,0,1,5.93.74c1.87,1.19,5.5,3.39,8.14,1.48,2.67,3.2,6.38-.84,10.37-.74h.74v-.74h.74c3-2.39,6.88-4,9.63-6.65a4,4,0,0,0,.74-.75,4.25,4.25,0,0,0,.74-3v-.74c1.65-.32.3-3.65.74-5.18v-3c-1.51-.21-1.45-2-3-2.22s-1.48-2-2.23-3c-.54-.38-1.05-.79-1.55-1.21a5.71,5.71,0,0,0-.39-.47l0,0a1.85,1.85,0,0,0-.54-.37c-3.53-3.32-6.15-7.56-10.07-10.5q.21-2.43-2.22-2.22c-.2-1.52-2-1.48-3-2.22-.95-1.27-1.53-2.92-3.7-3-3.75-4.89-9.05-8.24-14.07-11.86-2.14-1.31-2.43-4.47-5.93-4.44-.95-1.26-1.53-2.91-3.7-3-8.06-8.23-19.14-13.44-26.66-22.22-4.36-4.52-8.64-9.13-14.07-12.59-3.51-2.91-6.08-6.76-10.37-8.88-1.34-2.61-6-1.94-6.67-5.19a8,8,0,0,0-4.44-3.7c-3.27-3.65-7.5-6.33-11.85-8.89a20,20,0,0,0-8.14-5.92c-3.43-3.25-6.79-6.54-10.37-9.63a38.33,38.33,0,0,0-20.74-10.37c-.18-.8-1.47-.5-1.48-1.48h-.74c-4,.3-4.38-3-8.15-3-1.82-1.88-5.08-2.33-6.66-4.45h-.74c-.74,0-.88-.59-1.48-.73-.88-.86-2.62-.84-4.45-.75-.86.12-1.32-.16-1.48-.74-2-2.91-6.08-3.79-8.88-5.92h-.75c-1.78.3-1.6-1.36-3.7-.74-.51-1.47-2-2-3.7-2.22-1.94-1.9-6,.39-5.93,3,0,.94,1,1,.74,2.22H117c-.13,2.59.19,4.74,1.48,5.92v3c-1.07.17-.26,2.21-1.48,2.22v.74c-2.55,3.63-3.42,8.93-7.41,11.11.31,1.54-.51,2-.74,3-.72,0-.58.91-.74,1.48-1.71,1.51-3.76,2.66-5.18,4.45h-.75c-4.75,3.15-6.64,9.15-13.33,10.36-4.1-.15-6.52,1.38-7.4,4.45-2.63,4.77-7.23,7.58-10.37,11.85a3.49,3.49,0,0,0-.74,2.22c-3.13,2.3-3.88,7-6.66,9.63V77c-1.73.5-2,2.46-3.71,3v.74c-2.83,4.08-6,7.79-8.14,12.59V94c-4.23,4.41-7.2,10.08-11.85,14.07,0,2.94-2.89,3-5.19,3.7-1.25.3-5.72,1-6.66,3.7v2.23c-.14.6-.75.73-.74,1.48-1.15,2.8-5.78,2.12-5.93,5.92.12.86-.16,1.32-.74,1.48s-.74.75-1.48.75v.74c-.3,1.92-2.21,2.23-2.22,4.44-1.93.79-1,4.39-3,5.18v2.22C9.66,144.38,6.61,150.21.77,153.26c-.23,2,1.54,1.9,3,2.22.9,2.55,4.43,2.47,3.7,6.66v3c-.17,2.79-2.79,3.14-3,5.93-2.14,1.31-1.69,5.22-3.7,6.66v3.71c-.46,0-.88.11-.74.74C-.07,191.62,8,193,12.61,197.69c.11,1.38.49,2.47,1.49,3,1.22,2.23,4.27,2.64,3.7,6.67v.74h.74v2.22c.6.14.74.74,1.48.74.37,3.08,2.59,4.32,3,7.41v.74c2-.53-.53,3.49,1.48,3,2.41,3.07,6.84.28,11.85.74.63,1.1,1.87,1.59,3.71,1.48v.74h.74c4-3,10.36-4,16.29-6.66,1.17-.06,2.82.35,3-.75,6.31-1.84,6.59-9.7,9.63-14.81,1.8-1.16,2.77-3.15,3-5.92,2.74-1.46,3.53-4.86,4.44-8.15.73,0,.58-.9.74-1.48,1.75-.24,1.66-2.29,3-3v-.74c2-4.91,6.13-7.7,7.4-13.33,3-2.22,4.85-5.52,7.41-8.15v-.74c2.41-2,3.84-5,5.18-8.14,3.51-3.9,7.2-7.62,9.63-12.59,3.21-2.22,5.45-5.41,7.41-8.89.68-2.77,3.84-3.07,4.44-5.92,2.7-1.75,4.14-4.76,7.41-5.93-1.64,5.29-.45,11,0,16.9h0l0,1.15v.49c0,.31,0,.61,0,.91s0,.52,0,.77,0,.43,0,.64c0,.47,0,.93.07,1.36v.74c-1.75,2.94.3,9.68-2.23,11.85v.74h.75c-1.55,1.91.26,7.17-1.49,8.89v.73c1.1.14.68,1.79.74,3-.66,6.74-2.37,16.37-.74,23v.75c1,36.75,16.39,59.15,30.37,82.94v.74c3.67,5.22,6.61,11.16,11.1,15.55,0,2.21,1.93,2.52,2.23,4.45,2.89,6.73,8.3,10.95,13.33,15.54,2,3.17,3.3,7.08,5.92,9.64.45,3.5,2.85,5.05,4.45,7.4v.74c.74,0,.88.6,1.48.74a8.19,8.19,0,0,0,3.7,5.18c.63-.13.7.3.74.75.79,2.66,2.32,4.59,3.7,6.66v.74c.75,0,.88.6,1.49.74a5.22,5.22,0,0,1,1.47,2.22c.63,4.57,1.63,8.75,5.93,9.63.26,2.46,2.22,3.22,3.7,4.45.26,2.7,2.54,3.39,4.45,4.44a5.21,5.21,0,0,0,3,4.44c-.12.86.16,1.32.74,1.48-.51,4.47,5.15,2.75,5.18,6.67a41.52,41.52,0,0,0,7.41,7.4,8.21,8.21,0,0,0,3.7,5.19h.74a26.64,26.64,0,0,0,5.93,5.92h.74c4.15,3.75,8.93,6.87,13.33,10.37h1.48a5.27,5.27,0,0,1,1.48,2.22c2.11,4.56,3.72,9.61,6.67,13.33-.12,4.07,3.24,4.65,3.7,8.15,7.77,13.7,15.88,27.07,26.66,37.77V468c1.67,4.5,6.31,6,8.89,9.62-.12,1.85,1.16,2.3,1.48,3.71,7.07,7.24,13.68,14.95,21.47,21.48v.74c3.24,4.16,8.06,6.75,11.85,10.37,2,.46,1.85,3.09,4.45,3,2.71,3,6.81,4.54,9.62,7.4,1.95.77,2.5,2.94,4.45,3.71h.74c2.78,2.4,5.25,5.12,8.14,7.4h.74c.91,2.8,3.87,3.54,6.67,4.44h.74c1.06,2.15,3.37,3.06,5.93,3.71,0,.72.9.57,1.47.74,1.86,2.34,5.07,3.33,8.15,4.44,5.3,2.85,10.57,5.73,16.3,8.15,2.32.88,3.91,2.5,6.66,3a4.16,4.16,0,0,0,3,.74c2.83.63,4.71,2.2,7.41,3,4.65.78,7.89,3,12.59,3.71h.74c.81,2.64,5,1.94,7.4,3H451v.74c2.66-.44,3.59.86,5.19,1.48,3.38-.42,4.61,1.31,8.15.74,2.44,1.75,7.23,1.16,9.62,3h6.67c1,1.69,5.15.28,7.4.74,1.18.06,2.83-.35,3,.74h5.18c1.27-1.69,5.65-.27,8.15-.74h.74c2.32-1.62,6.51-1.39,8.88-3,4.9.7,6-2.39,11.11-1.48.45,0,.88.11.74.74h.74c.89-2.07,5.32-.6,6.67-2.22H534c13.78-.12,22-4.24,30.36-11.11h.74c3-1.64,6.33-3.06,8.15-5.93.74-1.46-.57-5.55,1.48-7.4v-.74C574.35,543.42,576,543.14,575.45,540.58ZM36.39,221.7a25.93,25.93,0,0,1,3.55,1.14A25.93,25.93,0,0,0,36.39,221.7ZM40,222.83c4.65-.74,7.95-4,12.77-5.13C48,218.87,44.68,222.09,40,222.83Zm325.86,86.76Zm-.25.28h0a4,4,0,0,1-.49.43A4,4,0,0,0,365.64,309.87Zm-28.65,47c0-.45.11-.87.74-.74v-4.44c1.67-2.28,3.74-4.16,4.44-7.41,2.45-4.21,6-7.29,7.41-12.58V331c7.12-9.66,15.53-18,23.69-26.66h1.49c.48,1,1.58,1.38,3,1.48a16.24,16.24,0,0,1,11.85-5.18h.74c1.6,2.49,3.4-1,5.18-.74v5.18c-2.64,5.51-5.36,10.94-9.63,14.81,2.43,4.82-1.75,7.65-3.7,10.37V331c-3.06,3.36-6.79,6.05-9.63,9.63h-.74c-2.22,1.48-4.62,2.78-5.92,5.18h-.74a29.62,29.62,0,0,0-8.15,5.93h-.74c-4.43,2.23-9,4.36-12.59,7.41h-.74c-2.35.11-3.26,1.67-5.92,1.48Zm2,5.19Z"/>
  </svg>
</div>

<div class="scroll-value-sita">
  <span>0</span>px
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 575.58 577.6">
    <path d="M575.45,540.58c-.79-2.17-2.1-3.83-1.48-7.41a16.88,16.88,0,0,0-8.15-2.22h-.74c-2.4-1.55-3.24-4.66-5.92-5.93-21.26-1.07-40.49-7.21-60.73-3.7-3.64.68-6.45-2.15-8.15.74h-.74c-1.26-1.69-5.65-.27-8.14-.74a2.77,2.77,0,0,0-3.71,0h-7.4c-10.41-3.91-22.85-5.78-33.33-9.63h-.74c-.11-1.62-1.86-1.59-3.7-1.48-2.16-2-4.47-3.92-8.15-4.44h-.74a16.59,16.59,0,0,0-8.88-5.19H414c-2.24-3.19-6.61-4.26-8.89-7.4-1.42-1.79-3.48-2.94-5.18-4.45V488c-2.6-3.57-6.95-5.4-9.63-8.88h-.74c-2.08-2.61-4.81-4.57-7.41-6.67v-.74a42.14,42.14,0,0,0-7.4-7.4c-.55-3.41-3.22-4.69-5.19-6.67a8.19,8.19,0,0,0-3.7-5.18v-.74c-.71-1.52-1.51-2.93-2.22-4.45-1.26-4.67-5.86-6-6.67-11.1,9.31-3.78,19.28-6.9,24.44-14.82,2.85,2.19,7.78,1.62,9.63,0,.53-2.2-2.32-1-1.57-3.43l.23-.11.53-.25h0a2.84,2.84,0,0,0,2.29-1.39h.74c4.91-1.76,7.68-5.65,12.59-7.4-3.19,3-6.3,6-9.63,8.88,14.38-2.92,21.36-19.6,31.85-28.88V388c2.54-1.9,4.9-4,5.92-7.41,1.49-1.23,3.45-2,3.71-4.44,2.13-.33,1.75-3.19,3.7-3.7v-.75c-.17-1.39.83-1.63.74-3,.94-1.28,2.5-1.94,2.22-4.44,1.07-.17.26-2.21,1.48-2.22v-.74c1.07-3.87,3.63-6.25,3.7-11.11,1.28-5.14,5-7.84,5.19-14.07v-1.49c1.45-1.26.23-5.19,2.22-5.92h.74v-3c1.23-1.28,1.23-7.61,0-8.89V314.7c-.27-6.4-1.84-11.49-3-17v-1.48a8.06,8.06,0,0,1-3.71-4.45c-1.09-1.62-1.44-4-3-5.18v-.74c-1.38-3.8-4.61-5.76-7.4-8.15.12-2.59-2.61-2.33-3.71-3.7-.32-.66-.65-1.33-1.48-1.48-.18-1.31-1.27-1.69-3-1.48-4.12-3-7.19-7.13-11.85-9.63h-.74c-.63-1.1-1.86-1.59-3.7-1.48-2.43-2.76-7.06-3.31-11.11-4.44h-.74c-17.28-10.37-33.15-22.15-55.54-27.41-1.61-1.67-2.53.62-5.19,0-1.76-1.23-8.61-1.23-10.37,0h-3.7c-.19,1-1.62.85-2.22,1.48-5.71,1-10.83,2.5-13.33,6.67a32.13,32.13,0,0,1,8.75-2.95,4.52,4.52,0,0,0,.77-.09h.06a6.36,6.36,0,0,0,.66-.18h0a101.41,101.41,0,0,1,10.49-1.21c1.18-.07,2.83.35,3-.74,4.36-.67,8.61,1.9,11.11.74,2.48.23,3,2.48,3.7,4.44a11.1,11.1,0,0,1-2.77,1.26h0c-1.57.19-3.18.32-4.81.41h0c-3.14-.32-6.23-1.46-9.45-1.67-11.49-.74-23.7,4.9-33.7,8.53a7.69,7.69,0,0,0-1.86.66c-1.27.44-2.51.85-3.69,1.18.69,5.33,5.61,2.37,8.14,3V251c-3.24,3.67-8.06,5.76-9.63,11.11v.74c-8.6,5.72-14,14.63-20.73,22.22v.74c-1.51.71-1.6,2.84-1.48,5.18-.47,2.49.95,6.88-.74,8.15v4.44a14.87,14.87,0,0,0-.74,8.89c-2.36,3.07-2,8.91-3.71,12.59-.14,3.1,3.64,2.29,3,5.92-2.37.35-2.61,2.82-5.18,3v-4.45c-2,.13-1,3.36-3.53,3l-.29-.16-.07,0c-2.51-2.07-3.57-5.57-6.48-7.24H254c-1.65-4.27-4.75-7.1-8.14-9.63v-.74c-2.07-2.62-3.74-5.64-6.67-7.41-5-7.85-10-15.62-15.55-23-2.38-4.29-2.86-10.48-6.67-13.33.31-1.79-1.35-1.61-.74-3.71a42.66,42.66,0,0,1-3-8.88c-.45-3-2.55-4.36-2.22-8.15-1.22,0-.42-2.05-1.48-2.22a14,14,0,0,0-3-5.18c-.24-5.93-4.13-8.21-5.18-13.34-1.09-1.62-1.44-4-3-5.18v-1.48c-.85-.88-.84-2.62-.74-4.44-.13-1.11.26-2.74-.74-3v-11.1c1.09-.14.68-1.79.74-3V197c.86-3.61-1.39-7.95,0-9.63v-7.4c.45,0,.87-.11.74-.75v-8.88c1.69-1,.28-5.16.74-7.41V161.4c1.67-.55.29-4.15.74-5.92v-9.63h-.74v-1.48c1.67-.55.29-4.16.74-5.93s-.93-5.37.74-5.92c5.92,2.71,8.11,9.17,16.29,9.63a3.53,3.53,0,0,0,2.22.74,2.05,2.05,0,0,0,2.23,1.48,31.21,31.21,0,0,0,11.11,8.89c.65.32,1.32.65,1.48,1.48h2.22v.74c2.87,2.3,6.95,3.41,10.37,5.18h3c.56,3.15,5.65,1.75,6.66,4.44H260c.95,1,3.21.74,5.18.75,2.85,2.44,7.94-1.28,10.37.74h.74c1.09,2.14,6.08,4.25,8.89,2.22.63-.14.69.29.74.74h1.48c1.05.17,1.25,1.22,2.22,1.48a13.76,13.76,0,0,1,5.93.74c1.87,1.19,5.5,3.39,8.14,1.48,2.67,3.2,6.38-.84,10.37-.74h.74v-.74h.74c3-2.39,6.88-4,9.63-6.65a4,4,0,0,0,.74-.75,4.25,4.25,0,0,0,.74-3v-.74c1.65-.32.3-3.65.74-5.18v-3c-1.51-.21-1.45-2-3-2.22s-1.48-2-2.23-3c-.54-.38-1.05-.79-1.55-1.21a5.71,5.71,0,0,0-.39-.47l0,0a1.85,1.85,0,0,0-.54-.37c-3.53-3.32-6.15-7.56-10.07-10.5q.21-2.43-2.22-2.22c-.2-1.52-2-1.48-3-2.22-.95-1.27-1.53-2.92-3.7-3-3.75-4.89-9.05-8.24-14.07-11.86-2.14-1.31-2.43-4.47-5.93-4.44-.95-1.26-1.53-2.91-3.7-3-8.06-8.23-19.14-13.44-26.66-22.22-4.36-4.52-8.64-9.13-14.07-12.59-3.51-2.91-6.08-6.76-10.37-8.88-1.34-2.61-6-1.94-6.67-5.19a8,8,0,0,0-4.44-3.7c-3.27-3.65-7.5-6.33-11.85-8.89a20,20,0,0,0-8.14-5.92c-3.43-3.25-6.79-6.54-10.37-9.63a38.33,38.33,0,0,0-20.74-10.37c-.18-.8-1.47-.5-1.48-1.48h-.74c-4,.3-4.38-3-8.15-3-1.82-1.88-5.08-2.33-6.66-4.45h-.74c-.74,0-.88-.59-1.48-.73-.88-.86-2.62-.84-4.45-.75-.86.12-1.32-.16-1.48-.74-2-2.91-6.08-3.79-8.88-5.92h-.75c-1.78.3-1.6-1.36-3.7-.74-.51-1.47-2-2-3.7-2.22-1.94-1.9-6,.39-5.93,3,0,.94,1,1,.74,2.22H117c-.13,2.59.19,4.74,1.48,5.92v3c-1.07.17-.26,2.21-1.48,2.22v.74c-2.55,3.63-3.42,8.93-7.41,11.11.31,1.54-.51,2-.74,3-.72,0-.58.91-.74,1.48-1.71,1.51-3.76,2.66-5.18,4.45h-.75c-4.75,3.15-6.64,9.15-13.33,10.36-4.1-.15-6.52,1.38-7.4,4.45-2.63,4.77-7.23,7.58-10.37,11.85a3.49,3.49,0,0,0-.74,2.22c-3.13,2.3-3.88,7-6.66,9.63V77c-1.73.5-2,2.46-3.71,3v.74c-2.83,4.08-6,7.79-8.14,12.59V94c-4.23,4.41-7.2,10.08-11.85,14.07,0,2.94-2.89,3-5.19,3.7-1.25.3-5.72,1-6.66,3.7v2.23c-.14.6-.75.73-.74,1.48-1.15,2.8-5.78,2.12-5.93,5.92.12.86-.16,1.32-.74,1.48s-.74.75-1.48.75v.74c-.3,1.92-2.21,2.23-2.22,4.44-1.93.79-1,4.39-3,5.18v2.22C9.66,144.38,6.61,150.21.77,153.26c-.23,2,1.54,1.9,3,2.22.9,2.55,4.43,2.47,3.7,6.66v3c-.17,2.79-2.79,3.14-3,5.93-2.14,1.31-1.69,5.22-3.7,6.66v3.71c-.46,0-.88.11-.74.74C-.07,191.62,8,193,12.61,197.69c.11,1.38.49,2.47,1.49,3,1.22,2.23,4.27,2.64,3.7,6.67v.74h.74v2.22c.6.14.74.74,1.48.74.37,3.08,2.59,4.32,3,7.41v.74c2-.53-.53,3.49,1.48,3,2.41,3.07,6.84.28,11.85.74.63,1.1,1.87,1.59,3.71,1.48v.74h.74c4-3,10.36-4,16.29-6.66,1.17-.06,2.82.35,3-.75,6.31-1.84,6.59-9.7,9.63-14.81,1.8-1.16,2.77-3.15,3-5.92,2.74-1.46,3.53-4.86,4.44-8.15.73,0,.58-.9.74-1.48,1.75-.24,1.66-2.29,3-3v-.74c2-4.91,6.13-7.7,7.4-13.33,3-2.22,4.85-5.52,7.41-8.15v-.74c2.41-2,3.84-5,5.18-8.14,3.51-3.9,7.2-7.62,9.63-12.59,3.21-2.22,5.45-5.41,7.41-8.89.68-2.77,3.84-3.07,4.44-5.92,2.7-1.75,4.14-4.76,7.41-5.93-1.64,5.29-.45,11,0,16.9h0l0,1.15v.49c0,.31,0,.61,0,.91s0,.52,0,.77,0,.43,0,.64c0,.47,0,.93.07,1.36v.74c-1.75,2.94.3,9.68-2.23,11.85v.74h.75c-1.55,1.91.26,7.17-1.49,8.89v.73c1.1.14.68,1.79.74,3-.66,6.74-2.37,16.37-.74,23v.75c1,36.75,16.39,59.15,30.37,82.94v.74c3.67,5.22,6.61,11.16,11.1,15.55,0,2.21,1.93,2.52,2.23,4.45,2.89,6.73,8.3,10.95,13.33,15.54,2,3.17,3.3,7.08,5.92,9.64.45,3.5,2.85,5.05,4.45,7.4v.74c.74,0,.88.6,1.48.74a8.19,8.19,0,0,0,3.7,5.18c.63-.13.7.3.74.75.79,2.66,2.32,4.59,3.7,6.66v.74c.75,0,.88.6,1.49.74a5.22,5.22,0,0,1,1.47,2.22c.63,4.57,1.63,8.75,5.93,9.63.26,2.46,2.22,3.22,3.7,4.45.26,2.7,2.54,3.39,4.45,4.44a5.21,5.21,0,0,0,3,4.44c-.12.86.16,1.32.74,1.48-.51,4.47,5.15,2.75,5.18,6.67a41.52,41.52,0,0,0,7.41,7.4,8.21,8.21,0,0,0,3.7,5.19h.74a26.64,26.64,0,0,0,5.93,5.92h.74c4.15,3.75,8.93,6.87,13.33,10.37h1.48a5.27,5.27,0,0,1,1.48,2.22c2.11,4.56,3.72,9.61,6.67,13.33-.12,4.07,3.24,4.65,3.7,8.15,7.77,13.7,15.88,27.07,26.66,37.77V468c1.67,4.5,6.31,6,8.89,9.62-.12,1.85,1.16,2.3,1.48,3.71,7.07,7.24,13.68,14.95,21.47,21.48v.74c3.24,4.16,8.06,6.75,11.85,10.37,2,.46,1.85,3.09,4.45,3,2.71,3,6.81,4.54,9.62,7.4,1.95.77,2.5,2.94,4.45,3.71h.74c2.78,2.4,5.25,5.12,8.14,7.4h.74c.91,2.8,3.87,3.54,6.67,4.44h.74c1.06,2.15,3.37,3.06,5.93,3.71,0,.72.9.57,1.47.74,1.86,2.34,5.07,3.33,8.15,4.44,5.3,2.85,10.57,5.73,16.3,8.15,2.32.88,3.91,2.5,6.66,3a4.16,4.16,0,0,0,3,.74c2.83.63,4.71,2.2,7.41,3,4.65.78,7.89,3,12.59,3.71h.74c.81,2.64,5,1.94,7.4,3H451v.74c2.66-.44,3.59.86,5.19,1.48,3.38-.42,4.61,1.31,8.15.74,2.44,1.75,7.23,1.16,9.62,3h6.67c1,1.69,5.15.28,7.4.74,1.18.06,2.83-.35,3,.74h5.18c1.27-1.69,5.65-.27,8.15-.74h.74c2.32-1.62,6.51-1.39,8.88-3,4.9.7,6-2.39,11.11-1.48.45,0,.88.11.74.74h.74c.89-2.07,5.32-.6,6.67-2.22H534c13.78-.12,22-4.24,30.36-11.11h.74c3-1.64,6.33-3.06,8.15-5.93.74-1.46-.57-5.55,1.48-7.4v-.74C574.35,543.42,576,543.14,575.45,540.58ZM36.39,221.7a25.93,25.93,0,0,1,3.55,1.14A25.93,25.93,0,0,0,36.39,221.7ZM40,222.83c4.65-.74,7.95-4,12.77-5.13C48,218.87,44.68,222.09,40,222.83Zm325.86,86.76Zm-.25.28h0a4,4,0,0,1-.49.43A4,4,0,0,0,365.64,309.87Zm-28.65,47c0-.45.11-.87.74-.74v-4.44c1.67-2.28,3.74-4.16,4.44-7.41,2.45-4.21,6-7.29,7.41-12.58V331c7.12-9.66,15.53-18,23.69-26.66h1.49c.48,1,1.58,1.38,3,1.48a16.24,16.24,0,0,1,11.85-5.18h.74c1.6,2.49,3.4-1,5.18-.74v5.18c-2.64,5.51-5.36,10.94-9.63,14.81,2.43,4.82-1.75,7.65-3.7,10.37V331c-3.06,3.36-6.79,6.05-9.63,9.63h-.74c-2.22,1.48-4.62,2.78-5.92,5.18h-.74a29.62,29.62,0,0,0-8.15,5.93h-.74c-4.43,2.23-9,4.36-12.59,7.41h-.74c-2.35.11-3.26,1.67-5.92,1.48Zm2,5.19Z"/>
  </svg>
</div>

【CSS】

.scroll-value-ue {
  position: fixed;
  z-index: 1000;
  top: 13px;
  right: 13px;
  min-width: 120px;
  height: 30px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  text-align: center;
  padding: 7px 12px 0;
  line-height: 1;
}
.scroll-value-ue svg {
  position: fixed;
  top: 1px;
  right: 135px;
  width: 31px;
}
.scroll-value-ue svg path {
  fill: rgba(0, 0, 0, 0.6);
}
.scroll-value-sita {
  position: fixed;
  z-index: 1000;
  bottom: 13px;
  right: 13px;
  min-width: 120px;
  height: 30px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  text-align: center;
  padding: 7px 12px 0;
  line-height: 1;
}
.scroll-value-sita svg {
  position: fixed;
  bottom: 1px;
  right: 135px;
  width: 31px;
  -webkit-transform: rotate(180deg) scale(-1, 1);
  transform: rotate(180deg) scale(-1, 1);
}
.scroll-value-sita svg path {
  fill: rgba(0, 0, 0, 0.6);
}

【jQuery】

var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
scrollValue();
$(window).on("scroll", function() {
  scroll = $(window).scrollTop();
  scrollValue();
});
$(window).on("load resize", function() {
  windowHeight = $(window).height();
  scrollValue();
});

function scrollValue() {
  $(".scroll-value-ue span").text(scroll);
  $(".scroll-value-sita span").text(scroll + windowHeight);
}
0px
0px
SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました