jquery前端固定顶部下拉固定显示插件sticky-header.js下载

sticky-header js能够让你的导航在页面下拉的时候也始终固定在固定位置并且不会随着下拉而消失,这个代码是基于jquery库实现的,所以在实际使用的时候注意要引入jq库,否则是运行不了的哦
代码笔记
演示地址 下载地址 打赏
 
sticky-header.js能够让你的导航在页面下拉的时候也始终固定在固定位置并且不会随着下拉而消失,这个代码是基于jquery库实现的,所以在实际使用的时候注意要引入jq库,否则是运行不了的哦

使用方法:
HTML

<script type="text/javascript" src="js/jquery.min.js"></script>
 <script type="text/javascript" src="js/sticky-header.js"></script>
<header class="example">   <!--  header stuff ... --> 

</header>

 

加载插件


$(document).ready(function(){  $('.example').stickMe(); 

})

 


插件样式:

<!-- Now plugin adds classes to your header on page load --> 
<header class="example stick-me not-sticking"> 
  <!--  header stuff ... --> 
</header>
 
 
 
<!-- Header is sticky --> 
<header class="example stick-me sticking"> 
  <!--  header stuff ... --> 
</header>
/* Make sure your header has z-index and background set and it's also full width */
.example {
  width: 100%;
  z-index: 999;
  background-color: #ffffff;
}
 
/* OR you can also style plugin's class .sticking, 
that way you can style it differently when it's sticking */
.sticking {
  width: 100%;
  z-index: 999;
  background-color: #ffffff;
}
其他详细请参考演示页面的说明



※ 网页工具/插件分类