分からないこと:フローティングメニューを行いたいのですが、
動作されません!原因を教えてください。
調べたこと、やったこと
フローティングメニューの本を読み、コードをみました。3回往復しています。
コード
HTML
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>float=menu</title> 8 <link rel="stylesheet" href="CSS/reset.css"> 9 <link rel="stylesheet" href="CSS/floating_menu.css"> 10 <link rel="stylesheet" href="Jquery/jquery-3.6.0.min.js"> 11 <link rel="stylesheet" href="Jquery/script.js"> 12</head> 13 14<body> 15 <div id="wrapper"> 16 <div id="container"> 17 <header> 18 <h1>Floating Menu</h1> 19 </header> 20 <nav> 21 <ul> 22 <li><a href="#">Menu1</a></li> 23 <li><a href="#">Menu2</a></li> 24 <li><a href="#">Menu3</a></li> 25 <li><a href="#">Menu4</a></li> 26 <li><a href="#">Menu5</a></li> 27 </ul> 28 </nav> 29 <main> 30 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 31 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 32 33 </main> 34 </div> 35 </div> 36 37 38 </body> 39</html>
CSS
1@charset "UTF-8"; 2 3body{ 4 font-family:Arial, sans-serif; 5 -webkit-font-smoothing:antialiased; 6 background:#E6E5E5; 7} 8 9#wrapper{ 10 width:900px; 11 padding:0 50px; 12 margin:0 auto; 13} 14 15#container{ 16 background:#FFF; 17 padding:0 170px; 18 position:relative; 19} 20 21h1{ 22 color:#635F5F; 23 font-size:4em; 24 text-align:center; 25 font-weight:bold; 26 padding:90px 0; 27} 28 29nav{ 30 position:absolute; 31 top:100px; 32 left:-50px; 33} 34 35li{ 36 list-style-type:none; 37} 38 39a{ 40 display:block; 41 background:#635F5F; 42 padding:20px; 43 width:150px; 44 color:#FFF; 45 text-decoration:none; 46 border-bottom:1px solid #777; 47} 48 49a:hover{ 50 background:#504E4E; 51} 52 53p{ 54 padding-bottom:50px; 55 line-height:2em; 56 color:#635F5F; 57}
jQuery
1$(function(){ 2 $(window).scroll(function(){ 3 //ナビゲーションの新しい位置を計算 4 $("nav").stop().animate({"top" : $(window).scrollTop()+100}, 500); 5 6 7 }); 8)}; 9
>動作されません!
文章(というか日本語として)おかしいと思います。
せめて「何が起きているか」書けませんか?
https://teratail.com/help/question-tips
>フローティングメニューの本を読み、コードをみました。3回往復しています。
これだけでは何とも。
この質問を見るのはあなたのこと(背景や前提含む)は何も知らない赤の他人なので、
「3回」という数字や「見た」というだけでは何も伝わりません。
それに「見る」「読む」と「理解する」は別の話なので、観点や見方やスキルが見合わなければ何百回見たところで理解はできません。
「フローティングメニュー」がどうあるべきかを理解して参照したかという点もあります。
回答1件
あなたの回答
tips
プレビュー