pureでvanillaな素のものjsで。

［　アイキャッチ画像　］

［　ヘッダー　］

［　コンテンツ　］

みたいな作りのwebページでスクロール後ヘッダーを固定する。

固定解除部分は 元のcssにあわせて書けばおｋです。

pureでvanillaな素のjsで。

どういう挙動かというと

iframeロード → 表示（多分画面幅くらい）→ ちょっと縮小 → さらに縮小して目的のwidthになる

という感じ。画像は載せられないので割愛します。

指定したwidthからはみ出た状態で始まり、最後には指定したwidthになるといった挙動ですね。

結局

var iframe = document.createElement('iframe');
iframe.width = '100%';
iframe.height = '100%';

とかいう風に書いているところに

iframe.scrolling = 'no';

この一文を入れてやると解決しました。

viewportとかwidthのこといっぱい調べたのになんのことはない・・・。

jsファイルに何かいてもillegal characterって言われて泣くかと思った。（ブラウザはFirefox)

vagrantで下の記事通りに設定したらちゃんとjs動くようになった。本当に助かった・・・。