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);

}

怎么用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

吸顶和吸底

– 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中 怎么使得导航栏固定在顶部

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前台分页

对于你这种情况,最好选一个表格插件,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插件,类似的插件很多。

js吸附置顶导航被下面的覆盖了怎么办

一般来讲实现导航栏指定是采用绝对定位的方式。示例代码如下:

div class="nav"这里是导航所在的DIV容器。/div

CSS代码:

.nav{

position:fixed; /* 绝对定位,fixed是相对于浏览器窗口定位。 */

top:0; /* 距离窗口顶部距离 */

left:0; /* 距离窗口左边的距离 */

width:100%; /* 宽度设置为100% */

height:40px; /* 高度 */

z-index:99; /* 层叠顺序,数值越大就越高。页面滚动的时候就不会被其他内容所遮挡。 */

}

设置方式,原理及大致内容请看css代码注释


分享名称:javascript吸顶,js 吸顶
转载来于:http://scyanting.com/article/dsohhcp.html