<!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后台模板中，开发者可以找到多种预设的布局模式，如固定侧边栏、折叠侧边栏、顶部导航等，这些模式已经考虑到了后台系统常见的交互需求。同时，模板中的颜色主题、字体设置等也是可定制的，满足不同项目的...
1. **CSS组件**：AmazeUI 提供了近20个CSS组件，这些组件涵盖了布局、导航、表单、按钮、提示等多种界面元素。例如，布局组件可以帮助开发者构建响应式的网页结构，导航组件则可以方便地创建下拉菜单、面包屑导航等...
在AMazeUI中，你可以找到一系列针对不同应用场景的页面模板和元素，使得开发者能够快速构建响应式、跨平台的网页应用。 1. **AMazeUI的核心特性** - **响应式布局**：AMazeUI支持多种屏幕尺寸，包括手机、平板、...
AmazeUI是一款基于移动优先（Mobile First）理念的前端框架，专为构建响应式、跨屏、高性能的网站而设计。其导航条（Navbar）组件是AmazeUI的核心部分，用于提供网页的主要导航功能，帮助用户在不同页面间进行切换。...
6. **页面布局**：后台管理模板通常包括固定侧边栏、头部导航、内容区域等布局元素，Amaze UI 提供了多种布局模式，如流式、网格、混合等。 7. **数据展示**：模板可能包含各种数据展示方式，如表格、卡片、列表等...
AmazeUI 网格系统是一种用于创建响应式布局的工具，它允许开发者根据不同的设备屏幕尺寸（如手机、平板和桌面）灵活地调整页面元素的排列方式。在AmazeUI中，网格系统基于12列的布局模型，通过设置不同断点（sm, md,...
7. **预定义的组件**：Amaze模板包含了一系列预定义的UI组件，如按钮、表单、表格、卡片、通知、进度条、面包屑导航等，这些都是后台系统常见的元素，可以快速拖放使用。 8. **插件集成**：为了增强功能，模板可能...
在AmazeUI Template这个压缩包中，可能包含了预设的前端报表模板和图表的示例代码，开发者可以参考这些模板快速构建自己的报表系统。使用时，需结合项目需求，适当调整样式和功能，以达到最佳的用户体验。