###前提・実現したいこと
サイドナビをスクロールに合わせ固定させフッターもしくは他の要素にサイドナビが触れたときに固定を解除させたものを実装させたいです。
現在スクロールに合わせて固定化するところまでできたのですが、他の要素があるとサイドナビがその要素を突き抜けてしまう症状をなかなか改善できなく困っています。
みなさまよろしくお願いします。
###該当のソースコード
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(function($) { var nav = $('.side'), offset = nav.offset(); $(window).scroll(function () { if($(window).scrollTop() > offset.top) { nav.addClass('fix_nav'); } else { nav.removeClass('fix_nav'); } }); }); </script> <style> *{padding:0; margin:0; } .fix_nav { position: fixed; z-index: 10; } .side{ width:30%; height:150px; float:left; background-color:#ccc; } .wrap{ overflow:hidden; } .main{ width:70%; height:400px; float:right; background-color:#ccf; } .footer{ width:100%; height:1000px; background-color:#cac; } </style> <div class="wrap"> <div id="fixedBox" class="side"> side </div> <div class="main"> main </div> </div> <div class="footer"> footer </div>
回答1件
あなたの回答
tips
プレビュー