十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
项目中常用的吸顶效果,如果页面没有固定定位的元素是比较容易实现的,但是如果页面结构比较复杂会有兼容性问题
创新互联是一家专业从事网站设计制作、网站设计的网络公司。作为专业网站制作公司,创新互联依托的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、营销型网站及网站设计开发服务!
常见兼容性问题:吸顶元素无法固定,会随着页面滚动抖动
解决方案:页面整体为弹性布局,中间加载部分自适应高度,总体结构为 顶部固定+内容+底部固定
注意整体弹性布局的时候如果要实现吸顶效果,必须将定位元素放到flex=1元素的外层,吸顶的元素需要用两个div,一个是正常显示的,一个是滚动到一定高度固定到顶部的
html:
div class="wrap" id="wrapId"
div class="isFixed" v-if="is_fixed"
div class="topBar" id="fixedTopFixed" ref="topBar"
div class="item" v-for="(item,index) in barList" 吸顶内容/div
/div
/div
div class="flexWrap" :class="is_fixed? 'wrapTop' : 'flex'"
div class="myScroll" v-infinite-scroll="loadMore" infinite-scroll-throttle-delay="500" infinite-scroll-immediate-check="true" infinite-scroll-disabled="busy" infinite-scroll-distance="50"
div class="flexContent"
div class="top" ref="top"
div class="banner"img src="../../../assets/images/文件名/banner.jpg" alt="" srcset=""/div
div class="topBar" id="fixedTop" ref="topBar" v-show="!is_fixed"
div class="item" v-for="(item,index) in barList" @click="tab(index,item)"
不吸顶时展示的内容
/div
/div
/div
div class="scrollContent" id="wrap-content" ref="contentH"
div class="memberList" v-show="infoList.length0" id="content"
div class="myScroll" v-infinite-scroll="loadMore" infinite-scroll-throttle-delay="500" infinite-scroll-immediate-check="true" infinite-scroll-disabled="busy" infinite-scroll-distance="10"
div class="memberItem" v-for="(item,index) in infoList"
加载内容
/div
div class="loading" v-if="loading"
span id="load-text"{{loadText}}/span
/div
/div
/div
div class="empty" v-show="noData"最新达成情况正在更新中...请稍后再来~/div
/div
/div
/div
/div
div class="footer"底部固定/div
/div
js:
data: {
return {
busy: false,
pageNum: 1,
pageSize: 10,
loading: false,
noData: false,
infoList: []
}
}
mounted() {
!--监听滚动--
that.$nextTick(() = {
let scrollDOM = document.querySelector('.flexContent')
scrollDOM.addEventListener('scroll',that.handleScroll)
})
},
methods: {
handleScroll () {
let scrollDOM = document.querySelector('.flexContent')
let scrollTop = scrollDOM.scrollTop;
!--计算滚动高度--
let clientHeight = document.documentElement.clientHeight
if (scrollTop document.querySelector('.banner').offsetHeight) {
this.is_fixed = true;
} else {
this.is_fixed = false;
}
},
!--//触发加载--
loadMore() {
if(this.pageNumthis.pages) {
this.loading = true
this.pageNum+=1
this.busy = true
this.loadData(接口参数,this.pageNum)
}
},
//加载时触发的接口调用
loadData() {
api.XXX({},function(success,data,err){
if(success) {
if(data.status==200) {
//加载逻辑判断
if(data.body.list.length0 pageNum0){
that.infoList = that.infoList.concat(data.body.list)
that.loading = false
}
if(pageNum==data.body.pages || data.body.list20) {
that.loading = true
that.loadText = '没有更多数据了'
}
if(pageNum==1 data.body.list.length==0) {
that.noData = true
that.infoList = []
}
}
}
})
}
}
css:
.isFixed {
width: 100%;
height: 1rem;
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
.myScroll {
height: 100%;
}
.wrap {
width: 7.5rem;
margin: auto;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.flex {
flex: 1;
}
.wrapTop {
padding-top:0.45rem;
}
.flexWrap {
width: 100%;
height: 100%;
}
.flexContent {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.top {
.banner {
position: relative;
img {
width: 100%;
display: block;
}
.month {
position: absolute;
bottom: 0.33rem;
left: 0.45rem;
color: #fff;
font-size: 0.45rem;
}
}
}
.scrollContent {
width: 100%;
background: #fff;
flex: 1;
-webkit-overflow-scrolling: touch;
.memberList {
height: 100%;
padding-top: 0.2rem;
}
}
.footer {
position: fixed;
bottom: 0;
width:7.5rem;
margin: auto;
height:auto;
background:rgba(0,0,0,.7);
}
找到一个叫NAV.JS,可以实现。你去百度一下NAV.JS。 还有一种是supersild插件实现,去下载一个supersild.js
script type="text/javascript"
jQuery(".xnav").slide({
type:"menu", //效果类型
titCell:".m", // 鼠标触发对象
targetCell:".sub", // 效果对象,必须被titCell包含
delayTime:0, // 效果时间
triggerTime:0,//鼠标延迟触发时间
defaultIndex:mindex
//returnDefault:false //返回默认状态
});
/script
以上代码可以插在底部(为了避免冲突)
这个代码要插在顶部 用js可以在静态页面里也实现。
script
var mindex =0;//定义菜单menu
/script
– 1 、监听 scroll 事件,实现吸顶功能
– 2 、 css 实现吸顶
写页面经常会遇到这种需求:导航菜单初始位置不在头部,滑动页面时候当导航菜单滑到头部位置就固定在头部,往下滑导航菜单又回到初始位置。
•网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度)
•(javascript) document.documentElement.scrollTop //firefox
•(javascript) document.documentElement.scrollLeft //firefox
•(javascript) document.body.scrollTop //IE
•(javascript) document.body.scrollLeft //IE
•(jqurey)
$(window).scrollTop() (jqurey)
$(window).scrollLeft()
•网页工作区域的高度和宽度
•(javascript) document.documentElement.clientHeight// IEfirefox (jqurey)
$(window).height()
•元素距离文档顶端和左边的偏移值
•(javascript) DOM元素对象.offsetTop //IEfirefox (javascript) DOM元素对象.offsetLeft //IEfirefox (jqurey) jq对象.offset().top
(jqurey) jq对象.offset().left
•页面元素距离浏览器工作区顶端的距离= 元素距离文档顶端偏移值- 网页被卷起来的高度
•即:
•页面元素距离浏览器工作区顶端的距离= DOM元素对象.offsetTop - document.documentElement.scrollTop
•1、监听scroll事件,实现吸顶功能
•window.addEventListener("scroll",()={
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; letoffsetTop = document.querySelector('#searchBar').offsetTop; if
(scrollTop offsetTop) { document.querySelector('#searchBar').style.position="fixed";document.querySelector('#searchBar').style.top="0";
} else { document.querySelector('#searchBar').style.position="";document.querySelector('#searchBar').style.top="";
} })
•2、css实现吸顶
•position:sticky;
top:0
相应的有时候就需要就有吸底效果
– 1 、监听 scroll 事件,实现吸底功能
• // 监听滚动条是否到达底部
• watchSchool() {
• //变量scrollTop是滚动条滚动时,距离顶部的距离
• var scrollTop =
• document.documentElement.scrollTop || document.body.scrollTop;
• //变量windowHeight是可视区的高度
• var windowHeight =
• document.documentElement.clientHeight || document.body.clientHeight;
• //变量scrollHeight是滚动条的总高度
• var scrollHeight =
• document.documentElement.scrollHeight || document.body.scrollHeight;
• //滚动条到底部的条件
• this.bottom = scrollTop + windowHeight == scrollHeight ? 43 : 0;
• }
• window.onscroll = () = {
• this.watchSchool();
• };
2、css实现吸顶
•position:sticky;
bottom:0
Bootstrap 导航栏可以动态定位。默认情况下,它是块级元素,它是基于在 HTML 中放置的位置定位的。通过一些帮助器类,可以把它放置在页面的顶部或者底部,或者可以让它成为随着页面一起滚动的静态导航栏。
如果想要让导航栏固定在页面的顶部,请向 .navbar class 添加 class .navbar-fixed-top。
Bootstrap定义:
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
历史:
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。
Bootstrap优点:
移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持:所有的主流浏览器都支持 Bootstrap。
容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。
响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件,易于定制。
它还提供了基于 Web 的定制。
它是开源的。
Bootstrap 包的内容
基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件部分详细讲解。
JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
定制:您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
对于你这种情况,最好选一个表格插件,JQ能用的第三方表格插件特别多,你想要的这些功能默认都已经支持,上手简单,且功能强大。
GridManager.js:
GridManager.js可快速的对table标签进行实例化,实例化后将实现以下功能:
宽度调整: 表格的列宽度可进行拖拽式调整
位置更换: 表格的列位置进行拖拽式调整
配置列: 可通过配置对列进行显示隐藏转换
表头吸顶: 在表存在可视区域的情况下,表头将一直存在于顶部
排序: 表格单项排序或组合排序
分页: 表格ajax分页,包含选择每页显示总条数和跳转至指定页功能
用户偏好记忆: 记住用户行为,含用户调整的列宽、列顺序、列可视状态及每页显示条数
序号: 自动生成序号列
全选: 自动生成全选列
导出: 当前页数据下载,和仅针对已选中的表格下载
右键菜单: 常用功能在菜单中可进行快捷操作
过滤: 通过对列进行过滤达到快速搜索效果
Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。
分页,即时搜索和排序
几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理
支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
各式各样的扩展: Editor, TableTools, FixedColumns ……
丰富多样的option和强大的API
支持国际化
Bootstrap Table显示数据表格格式,提供了丰富的支持,单选框、复选框、排序、分页等。
更多插件可自行百度jquery table插件,类似的插件很多。
一般来讲实现导航栏指定是采用绝对定位的方式。示例代码如下:
div class="nav"这里是导航所在的DIV容器。/div
CSS代码:
.nav{
position:fixed; /* 绝对定位,fixed是相对于浏览器窗口定位。 */
top:0; /* 距离窗口顶部距离 */
left:0; /* 距离窗口左边的距离 */
width:100%; /* 宽度设置为100% */
height:40px; /* 高度 */
z-index:99; /* 层叠顺序,数值越大就越高。页面滚动的时候就不会被其他内容所遮挡。 */
}
设置方式,原理及大致内容请看css代码注释