jQuery 固定页眉

17 Mar 2025 | 6 分钟阅读

在本文中，我们将使用 jQuery 来理解固定页眉。固定页眉或固定导航栏是一种智能导航工具，可在用户向下滚动或向上滚动页面时，将网站的页眉保持在屏幕的相同位置。当用户开始向上滚动时，它会出现在页面顶部。

以下是固定页眉的示例。

示例 1

<! DOCTYPE html>    
<html>    	
    <head>    	
  <meta charset = "UTF-8">
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  sticky header using Jquery </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />     
<script src = ?https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js?> </script>
<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);
h1 {
  color: grey;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.8vw;
  letter-spacing: 5px;
  line-height: 1;
  margin: 10;
}
body {
  height: 1000px;
  font-family: "Open Sans", sans-serif;
}
header {
  position: fixed;
  width: 100%;
  text-align: center;
  font-size: 33px;
  line-height: 108px;
  height: 108px;
  background: #335C7D;
  color: grey;
  font-family: 'PT Sans', sans-serif;
-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(0, 0, 0, 0.06);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    transition: all 2s;
}}
header.sticky {
   text-align: center;
  font-size: 14px;
  line-height: 38px;
  height: 78px;
  background: #efc47D;
  padding-left: 30px;
  margin: 2px;
}
ul {
  display: inline-block;
}
li {
  display: inline-block;
  padding: 0 40px;
  font-size: 34px;
  font-family: "Lucida Console", "Courier New", monospace;
}  
.text {
  text-align: center;
  font-size: 30px;
  position: absolute;
  top: 140px;
  left: 500px;
   font-family: "Lucida Console", "Courier New", monospace;
}
a {
  padding: 1px;
  text-decoration: none;
  font-family: "Lucida Console", "Courier New", monospace;
  color: #fff;
-webkit-transition: All 0.5s ease;
    -moz-transition: All 0.5s ease;
    -ms-transition: All 0.5s ease;
    -o-transition: All 0.5s ease;
    transition: All 0.5s ease;
}
a:hover {
  background-color: grey;
}
a:active {
  background-color: grey;
}
</style>
<body>
<header>
  <h1> Example: Sticky Header using Jquery </h1>
  <ul>
    <li> <a href = "#"> Home </a> </li>
    <li> <a href = "#"> Works </a> </li>
    <li> <a href = "#"> Blog </a> </li>
    <li> <a href = "#"> Contact Us </a> </li>
    <li> <a href = "#"> About </a> </li>
</ul>
</header>
  <div class = "text">
  SCROLL Content Down
  </div>
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 1) {  
    $('header').addClass("sticky");
  } else {
    $('header').removeClass("sticky");
  }
});
</script>
</body>
</html>

说明

在上面的示例中，我们通过使用 jQuery 的概念创建了一个固定页眉的示例。在这里，我们通过将导航栏定位在屏幕的某个部分来解决问题，无论网站用户最终停在哪里。以下代码用于将页眉固定在屏幕上。

<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 1) {  
    $('header').addClass("sticky");
  } else {
    $('header').removeClass("sticky");
  }
});

在上面的代码片段中，我们使用了 `addClass()` 函数来添加 `sticky` 类，并使用 `removeClass()` 函数来移除 `sticky` 类。当用户向下滚动网页时会添加 `sticky` 类，当用户向上滚动网页时会移除 `sticky` 类。

输出

以下是这个例子的输出。

在下面的输出中，已添加 `sticky` 类。

示例 2

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  stickyheader using Jquery </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />     
<script src = ?https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js?> </script>
<style>
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);
html { background-color: #f0f3f4; }
body, html {
    min-height: 100%;
    position: relative;
}
body {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #666666;
    font-weight:500;
    -webkit-font-smoothing: antialiased;
    line-height: 1.53846154;
}
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.header {
	padding: 25px 0;
  background: #666;
	padding: 3px;
  padding: 10px 20px;
  color: #fff;
font-size: 34px;
  font-family: "Lucida Console", "Courier New", monospace;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.nav {
	padding: 15px 0;
	background-color: black;
	position: -webkit-sticky;
}
.header {
	text-align: center;
	color: #fff;
}
.nav {
	text-align: center;
	color: #fff;
}
li {
  display: inline-block;
  padding: 10px;
  font-size: 24px;
  font-family: "Lucida Console", "Courier New", monospace;
}  
a {
  padding: 1px;
  text-decoration: none;
  font-family: "Lucida Console", "Courier New", monospace;
  color: #fff;
-webkit-transition: All 0.5s ease;
    -moz-transition: All 0.5s ease;
    -ms-transition: All 0.5s ease;
    -o-transition: All 0.5s ease;
    transition: All 0.5s ease;
}
a:hover {
  background-color: grey;
    text-decoration: none !important;
}
a:active {
  background-color: grey;
    text-decoration: none !important;
}
a:focus {
    color: #141719;
    text-decoration: none !important;
}
.content {
	width: 600px;
	margin: 10px auto 100px;
}
.sticky {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 100;
  border-top: 0;
}
</style>
<body>
<div class = "wrapper">
	<div class = "header">
Example: Jquery Stickyheader 
	</div>
	<div class = "nav">
	  <ul>
    <li> <a href = "#"> Home </a> </li>
    <li> <a href = "#"> Works </a> </li>
    <li> <a href = "#"> Blog </a> </li>
    <li> <a href = "#"> Contact Us </a> </li>
    <li> <a href = "#"> About </a> </li>
</ul>
	</div>
	<div class = "content">
		<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
		<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>	
    <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>	
	</div>
</div>
</body>
<script>
$(document).ready(function() { 
		   	var stickyNavTop = $('.nav').offset().top;
		                 var stickyNav = function() {
			    var scrollTop = $(window).scrollTop();   
			    if (scrollTop > stickyNavTop) { 
			        $('.nav').addClass('sticky');
			    } else {
			        $('.nav').removeClass('sticky'); 
			    }
			};
			stickyNav()
			$(window).scroll(function() {
				stickyNav();
			});
		});
</script>
</body>
</html>

说明

$(document).ready(function() { 
		   	var stickyNavTop = $('.nav').offset().top;
		                 var stickyNav = function() {
			    var scrollTop = $(window).scrollTop();   
			    if (scrollTop > stickyNavTop) { 
			        $('.nav').addClass('sticky');
			    } else {
			        $('.nav').removeClass('sticky'); 
			    }
			};
			stickyNav()
			$(window).scroll(function() {
				stickyNav();
			});
		});
</script>

输出

以下是这个例子的输出。

下一主题jQuery 年龄验证插件

jQuery 固定页眉

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery 固定页眉

示例 1

示例 2

相关帖子

使用 jquery 自动格式化您的数字和货币

Jquery 倒计时器

在 JQuery 中添加编辑删除表行

带有缩略图的 JQuery 照片库

使用 JQuery Ajax 动态添加删除输入字段

JQuery 裁剪插件

如何使用 jQuery 创建自定义图像放大镜

jQuery PayPal HTML 商店

Twenty Twenty jQuery 插件用于比较图像

JQuery 排序

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器