<!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代码会构建出聊天窗口的...
Amaze UI Admin是一款基于Amaze UI框架的后台管理系统模板,专为构建高效、美观的管理界面而设计。这款模板包含了丰富的组件和功能,适合用于OA(办公自动化)、CMS(内容管理系统)以及各种需要后台界面的应用场景...
AmazeUI模板会充分利用HTML5的新特性,如语义化标签(如、、和),以及离线存储、媒体元素和表单控件增强等功能,提升用户体验和页面性能。 2. **CSS3**: CSS3用于样式控制和页面美化,AmazeUI利用其强大的选择器、...
AmazeUI图标库的设计初衷是为了满足设计师和开发者的不同需求,无论是进行网站设计、构建移动应用还是进行其他形式的交互式产品开发,AmazeUI 图标库都能提供必要的视觉元素。这些图标以矢量形式存在,可以无限放大...
AmazeUI 按钮是基于前端框架 AmazeUI 的一个重要组件,主要为网页提供交互式的操作元素。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">`元素用于让用户选择本地的...