正文
javascript吸顶,js 吸顶
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
js吸顶效果与布局
项目中常用的吸顶效果，如果页面没有固定定位的元素是比较容易实现的，但是如果页面结构比较复杂会有兼容性问题
常见兼容性问题：吸顶元素无法固定，会随着页面滚动抖动
解决方案：页面整体为弹性布局，中间加载部分自适应高度，总体结构为 顶部固定+内容+底部固定
注意整体弹性布局的时候如果要实现吸顶效果，必须将定位元素放到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);
}
相关问答
Q1: 怎么用Jquery实现吸顶效果 为什么我的效果显示不出来
找到一个叫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
Q2: 吸顶和吸底
– 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
Q3: 在bootstrap中 怎么使得导航栏固定在顶部
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 插件来得到您自己的版本。
Q4: JQ前台分页
对于你这种情况，最好选一个表格插件，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插件，类似的插件很多。
Q5: js吸附置顶导航被下面的覆盖了怎么办
一般来讲实现导航栏指定是采用绝对定位的方式。示例代码如下：
div class="nav"这里是导航所在的DIV容器。/div
CSS代码：
.nav{
position:fixed; /* 绝对定位，fixed是相对于浏览器窗口定位。 */
top:0; /* 距离窗口顶部距离 */
left:0; /* 距离窗口左边的距离 */
width:100%; /* 宽度设置为100% */
height:40px; /* 高度 */
z-index:99; /* 层叠顺序，数值越大就越高。页面滚动的时候就不会被其他内容所遮挡。 */
}
设置方式，原理及大致内容请看css代码注释
