bootstrap 实现吸顶效果_js 实现吸顶效果 || 小程序的吸顶效果

最新推荐文章于 2021-07-05 21:50:14 发布

gjbgyuhg

最新推荐文章于 2021-07-05 21:50:14 发布

阅读量100

点赞数

文章标签： bootstrap 实现吸顶效果

本文链接：https://blog.csdn.net/weixin_26858217/article/details/113028556

版权

小程序吸顶效果

我是标题我是子标题

导航一个

我是一个内容

我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容

//index.js//获取应用实例

const app =getApp()

Page({

data: {

getDeomtop:'',

isFlixed:false},

onLoad:function() {var that = this;

wx.createSelectorQuery().select('.nav-group').boundingClientRect(function(rect) {

that.setData({ getDeomtop: rect.top })

}).exec()

onPageScroll(e) {var that = this

var domeHeight =that.data.getDeomtopvar isScrollTop =e.scrollTop

console.log(domeHeight)

console.log(e.scrollTop)if (isScrollTop >=domeHeight) {

that.setData({ isFlixed:true})

console.log(that.data.isFlixed)

}else{

that.setData({ isFlixed:false})

}

})

/**index.wxss**/.outside-img {

position: fixed;

width:100%;

top:0;

left:0;

z-index: -1;

}

.outside-box {

position: absolute;

left:0;

top:0;

width:100%;

}

.show-eg-img {

position: absolute;

left:0;

top:0;

height: 220px;

width:100%;

}

.inside-img {

position: fixed;

left:0;

top:0;

height: 100rpx;

width:100%;

z-index: 10;

overflow: hidden;

}

.nav-group {

display: flex;

position: relative;

z-index: 12;

height: 100rpx;

line-height: 100rpx;

}

.nav-group view {

flex:1;

color: #666;

text-align: center;

}

.heade-title {

position: relative;

z-index: 11;

font-size: 34rpx;

}

.content-text view {

height: 300rpx;

line-height: 300rpx;

}

.flixedclass {

position: fixed;

width:100%;

left:0;

top:0;

}

简单的吸顶效果

padding:0;

margin:0;

}

#nav {

width:100%;

height:60px;

background:#39f;

color:#fff;

line-height:60px;

text-align:center;

padding:0;

margin:0;

}

#nav li {float:left;

width:20%;

height:60px;

}

.fix {

position:fixed;

top:0;

left:0;

z-index: 1;

}

.hader-img {

position: fixed;

left:0;

top:0;

}

.content {

position: relative;

z-index: 2;

}

这个是一个吸顶效果，吸顶效果啊

let rect =headerNav.getBoundingClientRect();//获得页面中导航条相对于浏览器视窗的位置

let childDemoe = document.createElement("div");

headerNav.parentNode.replaceChild(childDemoe, headerNav);

childDemoe.appendChild(headerNav);

childDemoe.style.height= rect.height + "px";//获取距离页面顶端的距离

var headerNavleTop =headerNav.offsetTop;//滚动事件

document.onscroll = function(){//获取当前滚动的距离

var btop = document.body.scrollTop||document.documentElement.scrollTop;//如果滚动距离大于导航条据顶部的距离

if(btop>headerNavleTop){//为导航条设置fix

headerNav.className = "clearfix fix";

}else{//移除fixed

headerNav.className = "clearfix";

}

后续优化

gjbgyuhg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap 实现吸顶效果_js 实现吸顶效果 || 小程序的吸顶效果

小程序吸顶效果我是标题我是子标题导航一个导航一个导航一个导航一个我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容//index.js//获取应用实例const app =g...
复制链接

扫一扫

bootstrap 实现吸顶效果_js 实现吸顶效果 || 小程序的吸顶效果

商城标题