<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>固定元素</title>
<link rel="stylesheet" href="assets/css/amazeui.min.css">
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="assets/ie8/jquery.min.js"></script>
<script src="assets/ie8/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
</head>
<body style="margin: 50px;">
<!--基本形式-->
<div data-am-sticky>
<button class="am-btn am-btn-primary am-btn-block">固定在头部</button>
</div>
<!--设置上边距-->
<div data-am-sticky="{top:80}">
<button class="am-btn am-btn-primary">固定在头部80px位置</button>
</div>
<!-- 动画效果 -->
<div data-am-sticky="{animation: 'slide-top'}">
<button class="am-btn am-btn-success am-btn-block">固定到顶部动画效果</button>
</div>
<!-- 通过 JS -->
<div id="my-sticky">
<button class="am-btn am-btn-danger">通过 JS 固定在头部150px位置</button>
</div>
<script>
$(function() {
$('#my-sticky').sticky({
top: 150
})
});
</script>
<div style="height: 2000px;"></div>
</body>
</html>
效果图：
相关推荐
AmazeUI是一款基于移动优先的开源前端框架，它旨在提供一套高效、易用、跨屏的解决方案，帮助开发者快速构建适应各种设备的Web应用。在“amazeUI的使用”这个主题中，我们将深入探讨AmazeUI的核心特性、组件、以及...
AmazeUI是一个开源的前端框架，专为移动优先的Web开发设计。这个“基于AmazeUI的漂亮后台模板”提供了一套完整的、适用于后台管理界面的设计方案，它结合了AmazeUI的核心特性，使得开发者能够快速构建出既美观又实用...
如果希望下拉菜单与按钮或者其他元素联动，可以通过JavaScript和AmazeUI的组件API来实现。例如，可以创建一个按钮作为触发器，然后绑定事件来显示下拉菜单。 6. **响应式设计** 作为一款响应式框架，AmazeUI的...
1. **博客模板**：Amaze UI 提供了一套适用于博客的设计模板，这通常包括文章列表、文章详情页、评论区等元素。这种模板通常具有良好的可读性和易用性，同时保持简洁的布局，以便用户能快速获取信息。 2. **个人...
AmazeUI的模板设计简洁而实用，通常包含了一系列预设的页面布局、导航栏、侧边栏、表单、按钮、图标等元素，这些模板可以直接应用于项目中，大大节省了开发时间和成本。"AmazeUI模板简介有效，可以直接拿来使用"这句...
AmazeUI弹出窗是基于JavaScript和CSS3构建的一个轻量级、响应式的前端框架组件，主要用于实现网页上的对话框、提示框等交互效果。它提供了丰富的定制选项，可以适应不同场景下的需求，同时保持良好的用户体验。在...
AmazeUI是一款优秀的前端开发框架，专为快速构建响应式和移动优先的Web项目而设计。这个框架结合了中国传统设计美学与现代Web技术，提供了一系列丰富的组件和工具，旨在简化前端开发过程，提升用户体验。 首先，...
AmazeUI是一个强大的后台前端框架，专为适应移动互联网时代的需求而设计。它秉持“移动优先”（Mobile first）的设计哲学，将移动端的用户体验作为核心，进而逐步拓展至桌面和其他大屏设备，确保在各种屏幕尺寸下都...
Amaze UI是一款专为中国互联网设计的开源前端框架，它提供了丰富的组件和模板，适用于构建响应式、跨平台的Web应用，特别适合手机移动端的开发。在这个"Amaze UI手机移动端新闻html5页面模板"中，我们可以看到Amaze ...
AmazeUI是一款基于移动优先的前端开发框架，专为中国互联网环境设计，旨在提供高效、易用、跨屏的网页制作解决方案。它集成了多种组件和模块，帮助开发者快速构建响应式和高性能的Web页面，尤其适合企业级项目。在...
例如，`<link>`标签引用了Amaze UI的CSS文件，用于定义布局、字体、颜色等视觉元素；而`<script>`标签则加载了Amaze UI的JavaScript文件，以实现动态效果和交互行为。 在`<body>`部分，HTML代码会构建出聊天窗口的...
AmazeUI模板会充分利用HTML5的新特性，如语义化标签（如、、和），以及离线存储、媒体元素和表单控件增强等功能，提升用户体验和页面性能。 2. **CSS3**: CSS3用于样式控制和页面美化，AmazeUI利用其强大的选择器、...
Amaze UI Admin是一款基于Amaze UI框架的后台管理系统模板，专为构建高效、美观的管理界面而设计。这款模板包含了丰富的组件和功能，适合用于OA（办公自动化）、CMS（内容管理系统）以及各种需要后台界面的应用场景...
AmazeUI 按钮是基于前端框架 AmazeUI 的一个重要组件，主要为网页提供交互式的操作元素。AmazeUI 是一个由中国团队开发的、专为移动设备优化的开源前端框架，它支持响应式设计，能很好地适应不同屏幕尺寸的设备，如...
AmazeUI图标库是一款专为前端开发者设计的开源图标资源，它包含了大量的矢量图形，适用于各种Web项目。这个库提供了丰富的图标选择，能够满足设计师和开发者在网页设计中的多种需求。通过使用AmazeUI图标，你可以...
AmazeUI是一个基于移动优先（Mobile First）理念的前端开发框架，主要应用于构建响应式、跨平台的Web应用。...总之，“AmazeUI-2.2.1”是一个全面的前端框架，涵盖了构建现代Web应用所需的各种元素。
3. `widget.html`和`widget.basic.html`："Widget"指的是可复用的组件，这些文件可能是AmazeUI提供的小部件示例，如按钮、表单元素、下拉菜单等，`basic.html`可能是基础样式或功能的展示。 4. `admin-form.html`：...
AmazeUI的源码下载提供了深入研究和定制框架的机会，对于前端开发人员来说，这是一个宝贵的资源。 AmazeUI的核心特性包括： 1. **Mobile First**：AmazeUI遵循“mobile first”的设计理念，意味着它首先关注小屏幕...
在头像上传场景中，AmazeUI可能提供了如按钮、表单、图片预览等元素，使用户能够在前端完成选择和预览头像的操作。 1. **前端部分**： - **文件输入控件**：HTML5的`<input type="file">`元素用于让用户选择本地的...