이 글의 예시에서는 참고로 스크롤링 헤드를 모니터링하고 스크롤을 따라가는 부트스트랩 구현 방법을 공유합니다.
구현 사례
<body data-spy="scroll" data-target="#bs-example-navbar-collapse-1"> <div id='menu_wrap'> <div class='menu'> <nav class="navbar navbar-default" role="navigation"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#" style="font-weight:bold">植被数据录入</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <!-- <button type="button" class="close" data-dismiss="modal" data-target="#mychart2-zb"><span aria-hidden="true">×</span></button> --> <button type="button" class="btn btn-primary" style="float: right;margin-right: 10px;margin-top: 5px;" data-dismiss="modal" data-target="#mychart2-zb"><span aria-hidden="true">保存</span></button> <button type="button" class="btn btn-primary" style="float: right;margin-right: 10px;margin-top: 5px;" data-dismiss="modal" data-target="#mychart2-zb"><span aria-hidden="true">取消</span></button> </div> </div> </nav> </div> </div> </body>
css 컨트롤 스타일
.menu{ width:100%; z-index:99; } .menuFixed{ position:fixed; top:0; left:0; } #menu_wrap{ height:50px; width:100%; }
js 모니터링
<script> $(window).scroll(function () { var menu_top = $('#menu_wrap').offset().top; if ($(window).scrollTop() >= menu_top) { $('.menu').addClass('menuFixed') } else { $('.menu').removeClass('menuFixed') } }); </script>
JS 가져오기
<script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
공유해야만 지식이 전파되고, 새로운 지식이 확산되고, 더 많은 것을 배울 수 있습니다. . 여기에 쓰여진 모든 내용은 기본적으로 인터넷에서 정보를 검색하고 기록한 내용을 기반으로 하며 일부는 원본 버전에서 복사되었으며 때로는 내 아이디어도 모두에게 도움이 되기를 바랍니다.