jquery实现固定在顶部的菜单

发布时间:2020-07-22编辑:脚本学堂
本文介绍下,用jquery实现固定在顶部的菜单的一段代码,有兴趣的朋友,可以研究下。

借助jquery,可以很容易让菜单固定在网页顶部。
那么,同样也可以实现固定在底部、固定内容固定在固定位置,这个大家课后自己练习下。

1,引入jquery
 

复制代码 代码示例:
<!DOCTYPE html>
<html>
<head>
<title>haran.info_jquery实例_固定在顶部的菜单_www.jb200.com</title>
<metahttp-equiv="content-type"content="text/html; charset=UTF-8"/>
<scriptsrc="../js/jquery-1.8.3.min.js"type="text/javascript"></script><!-- 引入Jquery -->

2,布局样式
 

复制代码 代码示例:
#mynav{
    width:100%;
    height:53px;
    line-height:50px;
    text-align:center;
    background-position:0-97px;
}
.clr{
    height:20px;
}
.containerdiv{
    width:100%;
    height:100%;
    text-align:center;
}

3,功能
 

复制代码 代码示例:
<script type="text/javascript">
$(document).ready(function() {
    //获取要定位元素距离浏览器顶部的距离
    varnavH = $("#mynav").offset().top;
    //滚动条
    $(window).scroll(function(){
        //获取滚动条的滑动距
        varscroH = $(this).scrollTop();
        //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反
        if(scroH>=navH){
            $("#mynav").css({"position":"fixed","top":0});
        }elseif(scroH<navH){
            $("#mynav").css({"position":"static","margin":"0 auto"});
        }
        console.log(scroH==navH);
    })
});
</script>