滚动条下拉DIV固定在头部不动

置顶

强者YDY

已于 2022-04-13 19:27:50 修改

阅读量4.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：滚动条下拉DIV固定在头部不动 js 文章标签：滚动条下拉 DIV 固定在头部不动 js

于 2014-03-18 15:43:03 首次发布

本文链接：https://blog.youkuaiyun.com/u010319687/article/details/21462103

这篇博客介绍了如何使用JavaScript和CSS实现当页面滚动条下拉时，一个指定的DIV元素固定在页面头部的功能。通过添加特定的CSS样式和JavaScript事件监听滚动条位置，当滚动超过一定距离时，为DIV添加浮动样式使其保持在顶部显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>滚动条下拉DIV固定在头部不动</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<style>
*{padding:0;margin:0;}
.ab{ width:100%; background-color:#eee; height:250px; text-align:center; line-height:250px;}
.bc{ width:100%; background-color:#eee; text-align:center; text-align:center; color:#fff; font-size:24px; background-color:#060;}
.pf{ width:100%; height:50px; background-color:#C00; text-align:center; line-height:50px; color:#fff;}
/*---------------------漂浮导航---------------------------*/
html{ _background-image:url(about:blank); _background-attachment:fixed;/** 防止 ie