<%@ 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;}
/*-----------
滚动条下拉DIV固定在头部不动
于 2014-03-18 15:43:03 首次发布
这篇博客介绍了如何使用JavaScript和CSS实现当页面滚动条下拉时,一个指定的DIV元素固定在页面头部的功能。通过添加特定的CSS样式和JavaScript事件监听滚动条位置,当滚动超过一定距离时,为DIV添加浮动样式使其保持在顶部显示。
摘要由CSDN通过智能技术生成