コード ```###前提・実現したいこと ``#contents_2の#fixed_label_2の固定#contents_3の#fixed_label_3の固定 ###発生している問題・エラーメッセージ display; none;をdisplay:block;にした所の 固定したい部分の動きがおかしいです(T_T) スクロールしなくても勝手に一番上に固定されてしまいます ###該当のソースコード ```ここに言語を入力 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!--jquery本体--> <script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script> <!--css--> <link rel="stylesheet" href="./css/practice1.min.css"> </head> <body> <div class="header"> header </div> <div class="contents_1" id="contents_1"> <div class="fixed_label_1" id="fixed_label_1"> <a class="fixed_label_1_1" id="fixed_label_1_1"> <div class="one">one</div> </a> <a class="fixed_label_1_2" id="fixed_label_1_2"> <div class="two">two</div> </a> <a class="fixed_label_1_3" id="fixed_label_1_3"> <div class="three">three</div> </a> </div> <ul class="list"> <?php for($i=0; $i<50; $i++){ ?> <li>one</li> <?php } ?> </ul> </div> <div class="contents_2" id="contents_2"> <div class="fixed_label_2" id="fixed_label_2"> <a class="fixed_label_2_1" id="fixed_label_2_1"> <div class="one">one</div> </a> <a class="fixed_label_2_2" id="fixed_label_2_2"> <div class="two">two</div> </a> <a class="fixed_label_2_3" id="fixed_label_2_3"> <div class="three">three</div> </a> </div> <ul class="list"> <?php for($i=0; $i<50; $i++){ ?> <li>two</li> <?php } ?> </ul> </div> <div class="contents_3" id="contents_3"> <div class="fixed_label_3" id="fixed_label_3"> <a class="fixed_label_3_1" id="fixed_label_3_1"> <div class="one">one</div> </a> <a class="fixed_label_3_2" id="fixed_label_3_2"> <div class="two">two</div> </a> <a class="fixed_label_3_3" id="fixed_label_3_3"> <div class="three">three</div> </a> </div> <ul class="list"> <?php for($i=0; $i<50; $i++){ ?> <li>three</li> <?php } ?> </ul> </div> </body> <script> /*contents_1*/ $(function() { $("#fixed_label_1_2").click(function() { $("#contents_2").toggle(1); }); }); $(function() { $("#fixed_label_1_2").click(function() { $("#contents_1").toggle(1); }); }); $(function() { $("#fixed_label_1_3").click(function() { $("#contents_3").toggle(1); }); }); $(function() { $("#fixed_label_1_3").click(function() { $("#contents_1").toggle(1); }); }); /*contents_2*/ $(function() { $("#fixed_label_2_1").click(function() { $("#contents_1").toggle(1); }); }); $(function() { $("#fixed_label_2_1").click(function() { $("#contents_2").toggle(1); }); }); $(function() { $("#fixed_label_2_3").click(function() { $("#contents_3").toggle(1); }); }); $(function() { $("#fixed_label_2_3").click(function() { $("#contents_2").toggle(1); }); }); /*contents_3*/ $(function() { $("#fixed_label_3_1").click(function() { $("#contents_1").toggle(1); }); }); $(function() { $("#fixed_label_3_1").click(function() { $("#contents_3").toggle(1); }); }); $(function() { $("#fixed_label_3_2").click(function() { $("#contents_2").toggle(1); }); }); $(function() { $("#fixed_label_3_2").click(function() { $("#contents_3").toggle(1); }); }); /*スクロールで固定*/ $(function(){ var fix = $("#fixed_label_1"); var fixTop = fix.offset().top; $(window).scroll(function () { if($(window).scrollTop() >= fixTop) { fix.css("position","fixed"); fix.css("top","0"); } else { fix.css("position",""); fix.css("top",""); } }); }); $(function(){ var fix = $("#fixed_label_2"); var fixTop = fix.offset().top; $(window).scroll(function () { if($(window).scrollTop() >= fixTop) { fix.css("position","fixed"); fix.css("top","0"); } else { fix.css("position",""); fix.css("top",""); } }); }); $(function(){ var fix = $("#fixed_label_3"); var fixTop = fix.offset().top; $(window).scroll(function () { if($(window).scrollTop() >= fixTop) { fix.css("position","fixed"); fix.css("top","0"); } else { fix.css("position",""); fix.css("top",""); } }); }); </script> </html> *{ margin: 0; padding: 0; } a{ text-decoration: none; } .header{ width: 100vw; height: 50vw; background-color: darkblue; border-radius: 5vw; color: #ffffff; font-size: 10vw; line-height: 50vw; text-align: center; } .contents_1{ .fixed_label_1{ background-color: #ffffff; .one{ display: inline-block; height: 20vw; width: 32vw; line-height: 20vw; font-size: 5vw; text-align: center; border-bottom: solid 5px pink; } .two{ display: inline-block; height: 20vw; width: 32vw; line-height: 20vw; font-size: 5vw; text-align: center; border-bottom: solid 5px pink; } .three{ display: inline-block; height: 20vw; width: 32vw; line-height: 20vw; font-size: 5vw; text-align: center; border-bottom: solid 5px pink; } } .list{ font-size: 7vw; } } .contents_2{ display: none; .fixed_label_2{ background-color: #ffffff; .one{ display: inline-block; height: 20vw; width: 32vw; line-height: 20vw; font-size: 5vw; text-align: center; border-bottom: solid 5px pink; } .two{ display: inline-block; height: 20vw; width: 32vw; line-height: 20vw; font-size: 5vw; text-align: center; border-bottom: solid 5px pink; } .three{ display: inline-block; height: 20vw; width: 32vw; line-height: 20vw; font-size: 5vw; text-align: center; border-bottom: solid 5px pink; } } .list{ font-size: 7vw; } } .contents_3{ display: none; .fixed_label_3{ background-color: #fff; .one{ display: inline-block; height: 20vw; width: 32vw; line-height: 20vw; font-size: 5vw; text-align: center; border-bottom: solid 5px pink; } .two{ display: inline-block; height: 20vw; width: 32vw; line-height: 20vw; font-size: 5vw; text-align: center; border-bottom: solid 5px pink; } .three{ display: inline-block; height: 20vw; width: 32vw; line-height: 20vw; font-size: 5vw; text-align: center; border-bottom: solid 5px pink; } } .list{ font-size: 7vw; } }
###試したこと
###補足情報(言語/FW/ツール等のバージョンなど)
回答2件
あなたの回答
tips
プレビュー