Q&A
「ストローク」ではなく「スクロール」では？
前提・実現したいこと
いつもお世話になっております。
今回は以前に質問したスクロール後、出現画像をある位置に固定したいに近い部分があるのですが、どうにも知識及び応用力等も乏しいのもあり、質問させて貰いました。
内容としては以下の通りです。
該当コードを表示するとペンギンがスクロールについてくる形になると思います。
そのペンギンの初期位置をたとえば中間あたりから表示したいです。
これだけならtopをいじれば解決するのですが、したいことはもう一歩先のため困っています。
というのが現コードでそれをした場合HPを表示させているウインドウのサイズを変えた場合にズレが生じてしまいます。
このサンプルだと赤一色でわかりにくいですが、本来はいろいろ記載があります。
その記載を分割指定ってコードを再構築していけば<div>等で区切っていけば可能だと思うですが、今みたいに背景（下層）を画像とした場合は方法はないのでしょうか？
因みに現状stickyで行ってますが、最中的にはIE8くらいまでは対応させないといけません。
まだ試せてはいませんが、調べる中で「Polyfill」というものがあることがわかったので、そちらで対応出来るかなと考えております。
ですが、IE8くらいまでは対応させていく必要を考慮すると、stickyに拘る必要はないため、別の方法でも構いません。
発生している問題・エラーメッセージ
画層の完全固定が出来ない
該当のソースコード
html
1<!DOCTYPE HTML> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>サンプルサイト</title> 6<meta content="text/css" http-equiv="Content-Style-Type"> 7<link href="css/reset.css" rel="stylesheet" type="text/css"> 8<link href="css/実験.css" rel="stylesheet" type="text/css"> 9</head> 10 11 12 <body> 13 14 <div class="main"> 15 <img src="img/pen.png" class="pen"> 16 <img src="img/red.jpg" alt="メイン"> 17 18 </div> 19 20 <footer> 21 <div class="footer"> 22 23 </div> 24 <!-- footer --> 25 </footer> 26 <div class="copy"> 27 <small>Copyright © Sample</small> 28 </div> 29 </body> 30</html>
css
1[reset] 2@charset "utf-8"; 3 4/*=================================== 5 * css file for "moonyworks.com" 6 * file name : reset.css 7===================================== */ 8 9body{font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ",Meiryo,"ＭＳＰゴシック",sans-serif;} 10body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;} 11fieldset,img{border:0;} 12address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} 13ol,ul {list-style:none;} 14table{border-collapse:collapse;border-spacing:0;} 15caption,th {text-align:left;} 16 17/* 18hrタグを非表示にする記述だが今は使わない 19hr {display:none;} 20*/ 21 22/* =================== 23new clearfix 24===================*/ 25.clearfix:after { 26visibility:hidden;/*見えなくする*/ 27height:0;/*見えなくする*/ 28display: block;/*block要素にする*/ 29font-size: 0; 30content: " "; 31clear: both; 32 33} 34* html .clearfix { zoom: 1; } /* IE6 */ 35*:first-child+html .clearfix { zoom: 1; } /* IE7 */ 36 37 38/* =================== 39スクロールバーの有・無によるページのズレを防ぐ 40===================*/ 41* html body { 42 overflow-y: auto; 43} 44 45*+html body { 46 overflow-y: auto; 47} 48 49body { 50 overflow-y: scroll; 51} 52 53 54 55[実験] 56 57html 58font-size: 100%; 59} 60body{ 61font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif; 62line-height: 1.7; 63color: #432; 64} 65 66img{ 67 display: block; 68 border: none; 69 vertical-align: bottom; 70} 71 72 73.main img{ 74 width: 100%; 75 margin: 0; 76} 77 78 79.pen { 80 max-width: 100px; 81 position: -webkit-sticky; 82 position: sticky; 83 left: 150px; 84 top: 10px; 85} 86 87.footer{ background: none;} 88.footer{position: relative; background: #97C619; padding: 1500px 0 20px 0; overflow: hidden;} 89.footer p{text-align: center; border-top: 1px solid #BAD967; padding-top: 10px; margin: 0 5px;} 90
試したこと
・スクロール後、出現画像をある位置に固定したいの時みたいにJSの利用
・ネット検索
補足情報
因みに現状でなっているフッターの前で止まる仕様は消したくありません。
また、再現コードが凄い簡単なものになっていますが、ご了承下さい。
説明が下手であることは自覚しているので、不明点があれば追記修正しますので、ご指摘お願いいたします。
何か悩んでる時間が長いせいか凄い初歩的な事を見落としている（なにせ再現コードの上に出来る白い空白部分の原因もよくわからなかったので）気もするのですが、どうかご教授貰えれば幸いです。
回答1件
0
ベストアンサー
ざっくり読みました。「IE8くらい」と書かれている状況がかなりまずいです。IE8,IE9,IE10,IE11の全てに完璧に対応させる必要があるなら開発時点でIE8をベースに開発する必要があると思います。
JavaScriptもCSSもそれを基準に考える必要があり、例えばdisplay: flex; let a = 1;すら使えません。「Polyfill」程度で処理できるものもあればそうでないものも多数あります。（対応する「Polyfill」が無いものも多分ある）
なので、HTML/CSSを完全IE8対応した上（しないとJSがどう動くかわからないから）で「JSの利用」しかないでしょう。
ウインドウのサイズを変えた場合にズレが生じてしまいます。
リサイズ時のイベントを拾って位置計算をしなおすだけでよいのでは。
投稿2020/05/14 05:22
総合スコア69606
＞kei344さん
回答ありがとうございます。
やっぱりそうなってしまうのですね。
一応再度確認したら8は考慮しないで良いみたいな事はわかりました。（それでも対して変わりませんが・・・）
ただ、自分が想定していた物よりは妥協（？）が許されるみたいなので、 position fixedで仕様の惜しい所まで（別の問題が出たは出たので）はいったので、もう少しいろいろ練ってみようと思います。
貴重な意見を頂いたのになんかすみません。
でも、回答自体は大変参考なりました。
本当にありがとうございます。
もうIEなんて・・・
あなたの回答
tips
プレビュー
