零基础学做网站培训介绍

当前位置:

如何将网站导航栏固定在顶部(jquery固定导航栏)

在我们实际自己做网站时,往往为了方便用户点击导航栏里的栏目,需要将自己网站的导航栏一直固定在顶部。即使用户将网页往下拉时,也一直在浏览器的顶部。

以下是网站未被下拉时的样式:
jquery固定导航栏1

以下是网页被下拉后,导航栏一直处于网页顶部。
jquery固定导航栏2

在自己建网站时,实现网站导航栏固定在顶部的效果,需要使用JS或者使用jQuery教程里的知识。

原理:

通过JQuery来判断网页导航的上面与浏览器顶部的距离,来分别适用position:relative和position:fixed属性。

JQuery代码:

<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':'relative','top':'0px'})
}
})
})

</script>

网站导航栏固定在顶部全部代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> jquery固定导航栏</title>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<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':'relative','top':'0px'})
}
})
})

</script>
<style>
*{margin:0;padding:0;}
#nav{width:100%;border:1px solid red;background:#09C;color:#fff;}
#nav li{display:inline-block;padding:5px 10px;}
section {height:2000px;}
</style>
</head>

<body>

<header>
<div class="top"><img src="https://www.xuewangzhan.net/wp-content/themes/xwz/images/Course.jpg"  alt="LOGO"/></div>
<nav id="nav">
<ul>
<li>首页</li>
<li>新闻中心</li>
<li>产品安全</li>
<li>联系我们</li>
</ul>
</nav>
</header>
<section>
<!--网页主体内容-->
</section>
</body>
</html>

相关阅读:

如何让DIV悬浮在固定位置

JS实现Div滚动到指定位置固定

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 感谢VIP学员:卓新红  的无私分享,此模板已通过学做网站论坛网的审核,大家可放心使用。分享一个网址导航站模板,这个网址导航模板可以制作图片
  • 在学做网站论坛的VIP课程中,我们讲了做网站时,我们网站的导航是调用一级分类和页面,可往往为了一些需要,登录制作wordpress下拉菜单,要求调用某个
  • 在我们的建站课程中,跟大家讲过wordprss实现导航是利用二句代码来自动调用。这样只要我们在后台添加一个分类或者页面时,会自动调用出来。
  • 我们在自己建网站时,由于网站版面幅度的限制,我们之前讲制作大型门户网站鼠标移动tab切换栏目,今天我们讲另一种突破网页限制的特效- div滚动到指定
  • 在我们实际自己做网站时,往往为了方便用户点击导航栏里的栏目,需要将自己网站的导航栏一直固定在顶部。即使用户将网页往下拉时,也一直在浏览器的顶
  • div触顶固定悬浮在浏览器顶部就是某个版块,当浏览器拉动到这个DIV的位置时就会自动悬浮固定在浏览器顶部。如下图:下面学做网站论坛就来介绍
  • CSS如何调整DIV顶部边距 图文教程 (115939 次浏览)
    作者: wenmp424Email: 1871663623@qq.com详细内容:想把网站LOGO往下调,同时把导航往上调,跟背景图对齐,里面那一句是添加上边距的呢,该怎
  • 使用DZ制作论坛网站时,它的默认情况下,网站顶部是有一个登录框,它的作用可以很方便的让我们去填写用户名和密码。但是有时为了整个版面的美观,防止
  • 我们在学习怎么如何做网站时,网站做好之后,发现网站的顶部多出了一个空白行,网站的顶部无法达到浏览器的顶部。为什么我们在建网站时会出现这种奇怪
  • 在很多的图片网站上,全使用到3d轮播图效果,可以不断的实现旋转轮播,最大气美观。效果如图:对于这样一种高大上的3D旋转轮播图,做起来并不是想
  • 图片轮播特效在网站制作过程中经常会用到,它可以让一个“静止”的网站“动”起来。在学做网站论坛以前的建站教程中,也讲过如何制作网站幻灯片,我们在学
  • 在自己建网站过程中,由于版面限制,很多内容需要制作成一TAB选项卡,这样在同样一个尺寸的版块,可以显示成倍的内容。TAB选项卡在很多在的大量网站中