boostrap滚动监听

最新推荐文章于 2022-06-19 16:54:16 发布

SFwords

最新推荐文章于 2022-06-19 16:54:16 发布

阅读量291

点赞数

分类专栏：学习

学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

 
  <!DOCTYPE html> 
 
  <html> 
 
  <head> 
 
  <meta 
  charset= 
  "utf-8" 
  > 
 
  <title>Bootstrap Example 
  </title> 
 
  <meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1" 
  > 
 
  <link 
  rel= 
  "stylesheet" 
  href= 
  "http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" 
  > 
 
  <!-- 可以用下载到本地的css文件 --> 
 
  <script 
  src= 
  "http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js" 
  > 
  < 
  /script> 
 
  <!-- 可以用下载到本地的js文件 --> 
 
  <script 
  src= 
  "http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js" 
  > 
  < 
  /script> 
 
  <!-- 可以用下载到本地的js文件 --> 
 
  <style> 
 
  body { 
 
  position: 
  relative; 
 
   } 
 
  # 
  section1 { 
 
  padding-top: 
  50 
  px; 
 
  height: 
  500 
  px; 
 
  color: 
  #fff; 
 
  background-color: 
  #1E88E5; 
 
   } 
 
  # 
  section2 { 
 
  padding-top: 
  50 
  px; 
 
  height: 
  500 
  px; 
 
  color: 
  #fff; 
 
  background-color: 
  #673ab7; 
 
   } 
 
  # 
  section3 { 
 
  padding-top: 
  50 
  px; 
 
  height: 
  500 
  px; 
 
  color: 
  #fff; 
 
  background-color: 
  #ff9800; 
 
   } 
 
  # 
  section41 { 
 
  padding-top: 
  50 
  px; 
 
  height: 
  500 
  px; 
 
  color: 
  #fff; 
 
  background-color: 
  #00bcd4; 
 
   } 
 
  # 
  section42 { 
 
  padding-top: 
  50 
  px; 
 
  height: 
  500 
  px; 
 
  color: 
  #fff; 
 
  background-color: 
  #009688; 
 
   } 
 
  < 
  /style> 
 
  </head> 
 
  <body 
  data-spy= 
  "scroll" 
  data-target= 
  ".navbar" 
  data-offset= 
  "50" 
  > 
 
  <nav 
  class= 
  "navbar navbar-inverse navbar-fixed-top" 
  > 
 
  <div 
  class= 
  "container-fluid" 
  > 
 
  <div 
  class= 
  "navbar-header" 
  > 
 
  <button 
  type= 
  "button" 
  class= 
  "navbar-toggle" 
  data-toggle= 
  "collapse" 
  data-target= 
  "#myNavbar" 
  > 
 
  <span 
  class= 
  "icon-bar" 
  ></span> 
 
  <span 
  class= 
  "icon-bar" 
  ></span> 
 
  <span 
  class= 
  "icon-bar" 
  ></span> 
 
  </button> 
 
  <a 
  class= 
  "navbar-brand" 
  href= 
  "#" 
  >WebSiteName 
  </a> 
 
  </div> 
 
  <div> 
 
  <div 
  class= 
  "collapse navbar-collapse" 
  id= 
  "myNavbar" 
  > 
 
  <ul 
  class= 
  "nav navbar-nav" 
  > 
 
  <li> 
 
  <a 
  href= 
  "#section1" 
  >Section 1 
  </a> 
 
  </li> 
 
  <li> 
 
  <a 
  href= 
  "#section2" 
  >Section 2 
  </a> 
 
  </li> 
 
  <li> 
 
  <a 
  href= 
  "#section3" 
  data-click= 
  "scroll-to-target" 
  >Section 3 
  </a> 
 
  </li> 
 
  <li 
  class= 
  "dropdown" 
  > 
 
  <a 
  class= 
  "dropdown-toggle" 
  data-toggle= 
  "dropdown" 
  href= 
  "#" 
  >Section 4 
 
  <span 
  class= 
  "caret" 
  ></span> 
 
  </a> 
 
  <ul 
  class= 
  "dropdown-menu" 
  > 
 
  <li> 
 
  <a 
  href= 
  "#section41" 
  >Section 4-1 
  </a> 
 
  </li> 
 
  <li> 
 
  <a 
  href= 
  "#section42" 
  >Section 4-2 
  </a> 
 
  </li> 
 
  </ul> 
 
  </li> 
 
  </ul> 
 
  </div> 
 
  </div> 
 
  </div> 
 
  </nav> 
 
  <div 
  id= 
  "section1" 
  class= 
  "container-fluid" 
  > 
 
  <h1>Section 1 
  </h1> 
 
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at 
 
   the navigation bar while scrolling! 
  </p> 
 
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at 
 
   the navigation bar while scrolling! 
  </p> 
 
  </div> 
 
  <div 
  id= 
  "section2" 
  class= 
  "container-fluid" 
  > 
 
  <h1>Section 2 
  </h1> 
 
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at 
 
   the navigation bar while scrolling! 
  </p> 
 
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at 
 
   the navigation bar while scrolling! 
  </p> 
 
  </div> 
 
  <div 
  id= 
  "section3" 
  class= 
  "container-fluid" 
  > 
 
  <h1>Section 3 
  </h1> 
 
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at 
 
   the navigation bar while scrolling! 
  </p> 
 
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at 
 
   the navigation bar while scrolling! 
  </p> 
 
  </div> 
 
  <div 
  id= 
  "section41" 
  class= 
  "container-fluid" 
  > 
 
  <h1>Section 4 Submenu 1 
  </h1> 
 
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at 
 
   the navigation bar while scrolling! 
  </p> 
 
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at 
 
   the navigation bar while scrolling! 
  </p> 
 
  </div> 
 
  <div 
  id= 
  "section42" 
  class= 
  "container-fluid" 
  > 
 
  <h1>Section 4 Submenu 2 
  </h1> 
 
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at 
 
   the navigation bar while scrolling! 
  </p> 
 
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at 
 
   the navigation bar while scrolling! 
  </p> 
 
  </div> 
 
  </body> 
 
  </html>

SFwords

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
boostrap滚动监听

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Bootstrap Example&lt;/title&gt; &lt;meta name="viewport" content="width=device-wid
复制链接

扫一扫