jQuery网页向下滚动导航固定顶部代码

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery网页向下滚动导航固定顶部代码相关的知识，希望对你有一定的参考价值。

 

技术分享 
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery网页向下滚动导航固定顶部代码</title>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" >
</head>  
<body><script src="/demos/googlegg.js"></script>
<div id="nav-wrap" style="height:1900px;background:#FC0;margin-top:40px;position:relative;">
    <ul id="nav" style="height:60px;background:#0F9;top:300px;position:absolute;width:100%;">
        <li>导航栏项目一</li>
        <li>导航栏项目二</li>
        <li>导航栏项目三</li>
        <li>导航栏项目四</li>
        <li>导航栏项目五</li>
    </ul>
</div>

<script>
//方法一：
$(function(){
var a = $(‘#nav‘),
    b =a.offset();
$(document).on(‘scroll‘,function(){
    var    c = $(document).scrollTop();
    if(b.top<=c){
        a.css({‘position‘:‘fixed‘,‘top‘:‘0px‘})
        }else{
            a.css({‘position‘:‘absolute‘,‘top‘:‘300px‘})
            }
    })
})
//方法二：
/*$(function(){
var a = $(‘#nav‘),
b =a.offset();
$(document).on(‘scroll‘,function(){
var    c = $(document).scrollTop();
if(b.top<=c){
    a.css({‘position‘:‘fixed‘,‘top‘:‘0px‘,‘background‘:‘#fff‘,‘z-index‘:‘3‘,‘border-bottom‘:‘3px solid #ccc‘,‘box-shadow‘:‘2px 2px 2px 2px #555‘})
    }else if(b.top>c){
        a.removeAttr(‘style‘);
        }
})
})*/

</script>

</body>  
</html>
View Code

 

 

————————————————————

以上是关于jQuery网页向下滚动导航固定顶部代码的主要内容，如果未能解决你的问题，请参考以下文章

双向滚动时隐藏固定菜单

BootStrap有用代码片段（持续总结）

如何在引导程序 3 中向下滚动带有固定标题（导航栏）的表格行时将表格标题（标题）粘贴在顶部？

BootStrap实用代码片段（持续总结）

jQuery：在页面滚动时更改固定顶部导航栏的文本颜色

滚动时将菜单栏固定在顶部