> php教程 > PHP开发 > 본문

부트스트랩은 머리를 따라가는 스크롤을 구현하기 위해 스크롤을 모니터링합니다.

高洛峰
풀어 주다: 2016-12-07 13:53:40
원래의
1480명이 탐색했습니다.

이 글의 예시에서는 참고로 스크롤링 헤드를 모니터링하고 스크롤을 따라가는 부트스트랩 구현 방법을 공유합니다.

구현 사례

<body data-spy="scroll" data-target="#bs-example-navbar-collapse-1">
<div id=&#39;menu_wrap&#39;>
 <div class=&#39;menu&#39;>
  <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 = $(&#39;#menu_wrap&#39;).offset().top;
 if ($(window).scrollTop() >= menu_top) {
 $(&#39;.menu&#39;).addClass(&#39;menuFixed&#39;)
 }
 else {
 $(&#39;.menu&#39;).removeClass(&#39;menuFixed&#39;)
 }
});
</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>
로그인 후 복사

공유해야만 지식이 전파되고, 새로운 지식이 확산되고, 더 많은 것을 배울 수 있습니다. . 여기에 쓰여진 모든 내용은 기본적으로 인터넷에서 정보를 검색하고 기록한 내용을 기반으로 하며 일부는 원본 버전에서 복사되었으며 때로는 내 아이디어도 모두에게 도움이 되기를 바랍니다.


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿