jquery 网页上移固定

原创

mob64ca12ea8117 2023-12-06 08:36:57 ©著作权

文章标签 jQuery HTML jquery 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12ea8117的原创作品，请联系作者获取转载授权，否则将追究法律责任

实现jquery网页上移固定

1. 整体流程

为了实现网页上移固定效果，我们可以按照以下步骤进行操作：

步骤	描述
1	引入jQuery库
2	创建HTML结构
3	编写CSS样式
4	编写jQuery代码
5	测试效果

2. 具体步骤及代码

2.1 引入jQuery库

首先，你需要在HTML文件中引入jQuery库。可以从CDN上获取最新版本的jQuery库，代码如下：

<script src="

2.2 创建HTML结构

然后，我们需要创建HTML结构，包括一个顶部导航栏和一个内容区域。下面是一个简单的例子：

<div class="navbar">
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Services</li>
    <li>Contact</li>
  </ul>
</div>

<div class="content">
  <!-- 内容区域 -->
</div>

2.3 编写CSS样式

接下来，我们需要编写CSS样式，使导航栏固定在页面的顶部位置，并设置内容区域的顶部边距。代码如下：

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #fff;
}

.content {
  margin-top: 50px; /* 调整顶部边距，避免内容被导航栏遮挡 */
}

2.4 编写jQuery代码

最后，我们需要编写jQuery代码，实现网页上移固定效果。代码如下：

$(document).ready(function() {
  var navbar = $(".navbar");
  var navbarOffsetTop = navbar.offset().top;

  $(window).scroll(function() {
    var scrollTop = $(window).scrollTop();

    if (scrollTop >= navbarOffsetTop) {
      navbar.addClass("fixed");
    } else {
      navbar.removeClass("fixed");
    }
  });
});