×

简单实现导航固定效果

作者:商内在2017.05.19来源:Web前端之家浏览:12477评论:0
关键词:JQueryJS

jquery实现的导航固定效果。

.nav为导航的class。

$(function(){ 
  $(window).scroll(function() {
 if($(window).scrollTop()>=250){
  $(".nav").addClass("fixedNav");
 }else{
  $(".nav").removeClass("fixedNav");
 } 
  });
});

CSS代码

.fixedNav{
 position:fixed;
 top:0px;
 left:0px;
 width:100%;
 z-index:100000;
 _position:absolute;
 _top:expression(eval(document.documentElement.scrollTop));
}

HTML代码

<div class="nav"><p>导航固定</p></div>

我们看下完整的代码,可以预览的哦~

<!DOCTYPE html> 
<html> 
<head> 
<title>导航固定</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script type="text/javascript" src="https://www.jiangweishan.com/demo/js/jquery-2.2.4.min.js"></script> 
<style type="text/css"> 
*{margin: 0px;padding: 0px;} 
.nav{height:40px;text-align:center;background:#000;color:#fff;line-height:40px}
.fixedNav{
 position:fixed;
 top:0px;
 left:0px;
 width:100%;
 z-index:100000;
 _position:absolute;
 _top:expression(eval(document.documentElement.scrollTop));
}
</style> 
</head> 
<body> 
<div class="nav">
    <p>导航固定</p>
</div>
<div style="height:1800px"></div>
<script type="text/javascript"> 
    $(function(){ 
      $(window).scroll(function() {
         if($(window).scrollTop()>=250){
          $(".nav").addClass("fixedNav");
         }else{
          $(".nav").removeClass("fixedNav");
         } 
      });
    });
</script>
</body> 
</html>


您的支持是我们创作的动力!
温馨提示:本文作者系商内在 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/biji102.html

网友评论文明上网理性发言 已有0人参与

发表评论: