実現したいこと
idx.htmlファイルの<!DOCTYPE html>を削除すれば問題なく作動してくれますが、
doctype宣言を記述するとjQueryが外部のファイルを読み込めなくなってしまいます。
もし、理由をご存知の方がおられましたら教えて下さい。
発生している問題・エラーメッセージ
‘height’ の値をパース中にエラーが発生しました。 このスタイル宣言は無視されました。 style.css:8:22 ‘width’ の値をパース中にエラーが発生しました。 このスタイル宣言は無視されました。 style.css:9:22 ‘width’ の値をパース中にエラーが発生しました。 このスタイル宣言は無視されました。 style.css:14:22 ‘left’ の値をパース中にエラーが発生しました。 このスタイル宣言は無視されました。 style.css:19:22
該当のソースコード
HTML
1<!-- <!DOCTYPE html> --> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<title>非同期通信サンプル</title> 6<!-- jQuery Core 3.6.3 --> 7<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM="crossorigin="anonymous"></script> 8<link href="css/style.css" rel="stylesheet"> 9</head> 10<body> 11 <span id="scrollText"></span> 12 <div id="firstBlock"> 13 高さが800ピクセルの記事<br> 14 <br> 15 ウィンドウの高さ:<span id="winHgt"></span> 16 <br> 17 second_blockの位置:<span id="secondTop"></span> 18 </div> 19 <div id="secondBlock">読み込み中</div> 20 <script src="js/app.js"></script> 21</body> 22</html>
jQuery
1$(function(){ 2 3 const secondOffset = $('#secondBlock').offset(); // second_blockの位置を取得 4 const winHgt = $(window).height(); // ウィンドウの高さを取得 5 6 // ウィンドウの高さを表示 7 $('#winHgt').text(winHgt); 8 9 // second_blockのTOP位置を表示 10 $('#secondTop').text(secondOffset.top); 11 12 // スクロールされたときの処理 13 $(window).scroll(function() { 14 15 // 縦方向のスクロール量を取得 16 const scrollTop = $(window).scrollTop(); 17 18 // スクロール量をスクロール位置に表示 19 $('#scrollText').text(`スクロール量:${ scrollTop }`); 20 $('#scrollText').css({ top : scrollTop }); 21 22 // 条件式:secondBlockが表示されるかどうか 23 Number(winHgt) + Number(scrollTop) > Number(secondOffset.top) 24 25 // 真の場合:ファイルを読み込み表示 26 && $('#secondBlock').load('txt/second_data.txt'); 27 }); 28 29});
CSS
1body { 2 margin : 0; 3 padding : 0; 4} 5 6#firstBlock { 7 background-color : #ffc; 8 height : 800; 9 width : 600; 10} 11 12#secondBlock { 13 background-color : #cfc; 14 width : 600; 15} 16 17#scrollText { 18 background-color : #fcc; 19 left : 600; 20 position : absolute; 21}
回答1件
あなたの回答
tips
プレビュー