js 实现吸顶效果 || 小程序的吸顶效果
小程序吸顶效果
<!--index.wxml-->
<view class="container">
<view class='outside-img'>
<view class='outside-box'>
<image class='show-eg-img' src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565154163445&di=2360e1ec1b7ffee77318f29b0eac3603&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F94o3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Fc995d143ad4bd113631e59e358afa40f4afb050b.jpg'></image>
</view>
</view>
<view class='inside-img'>
<view class='outside-box'>
<image class='show-eg-img' src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565154163445&di=2360e1ec1b7ffee77318f29b0eac3603&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F94o3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Fc995d143ad4bd113631e59e358afa40f4afb050b.jpg'></image>
</view>
</view>
<view class='content-group'>
<view class='heade-title'>
我是标题
<view>
我是子标题
</view>
</view>
<view class="nav-group {{isFlixed ? 'flixedclass': ''}}">
<view>导航一个</view>
<view>导航一个</view>
<view>导航一个</view>
<view>导航一个</view>
</view>
<view class='content-text'>
<view>我是一个内容</view>
<view>我是一个内容</view>
<view>我是一个内容</view>
<view>我是一个内容</view>
<view>我是一个内容</view>
<view>我是一个内容</view>
<view>我是一个内容</view>
<view>我是一个内容</view>
<view>我是一个内容</view>
<view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view><view>我是一个内容</view>
</view>
</view>
</view>
//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.getDeomtop
var 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;
}
简单的吸顶效果
<!DOCTYPE>
<html>
<head>
<style type="text/css">
body {
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;
}
</style>
</head> <div class="wrap">
<div class="hader-img">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565094369494&di=7e1e19d2b2d913d3aecbe4fcc67b034a&imgtype=0&src=http%3A%2F%2Fimg18.3lian.com%2Fd%2Ffile%2F201710%2F27%2F6239258bb41622006605f967200b806b.jpg" alt="">
</div>
<div class="content">
<div class="header">
<h1>商城标题</h1>
<p>子标题子标题子标题子标题子标题子标题子标题</p>
<ul id="nav">
<li>导航内容</li>
<li>导航内容</li>
<li>导航内容</li>
</ul>
</div>
<div class="con">
<p>这个是一个吸顶效果，吸顶效果啊</p>
<p>这个是一个吸顶效果，吸顶效果啊</p>
<p>这个是一个吸顶效果，吸顶效果啊</p>
<p>这个是一个吸顶效果，吸顶效果啊</p>
<p>这个是一个吸顶效果，吸顶效果啊</p>
<p>这个是一个吸顶效果，吸顶效果啊</p>
<p>这个是一个吸顶效果，吸顶效果啊</p>
<p>这个是一个吸顶效果，吸顶效果啊</p>
<p>这个是一个吸顶效果，吸顶效果啊</p>
<p>这个是一个吸顶效果，吸顶效果啊</p>
<p>这个是一个吸顶效果，吸顶效果啊</p>
<p>这个是一个吸顶效果，吸顶效果啊</p>
<p>这个是一个吸顶效果，吸顶效果啊</p>
<p>这个是一个吸顶效果，吸顶效果啊</p>
<p>这个是一个吸顶效果，吸顶效果啊</p>
<p>这个是一个吸顶效果，吸顶效果啊</p>
<p>这个是一个吸顶效果，吸顶效果啊</p>
<p>这个是一个吸顶效果，吸顶效果啊</p>
<p>这个是一个吸顶效果，吸顶效果啊</p>
<p>这个是一个吸顶效果，吸顶效果啊</p>
<p>这个是一个吸顶效果，吸顶效果啊</p>
<p>这个是一个吸顶效果，吸顶效果啊</p>
<p>这个是一个吸顶效果，吸顶效果啊</p>
<p>这个是一个吸顶效果，吸顶效果啊</p>
<p>这个是一个吸顶效果，吸顶效果啊</p>
<p>这个是一个吸顶效果，吸顶效果啊</p>
<p>这个是一个吸顶效果，吸顶效果啊</p>
</div>
</div>
</div> <script type="text/javascript">
let headerNav = document.getElementById("nav");
//占位符的位置
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";
}
}
</script>
</html>
后续优化
js 实现吸顶效果 || 小程序的吸顶效果的更多相关文章
- 微信小程序-滚动消息通知效果
这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是滑块视图容器. 我们通过vertical属性(默认为false,实现默认左右滚动)设置 ...
- 微信小程序实现淡入淡出效果（页面跳转）
//目前小程序没有fadeIn(),fadeOut()方法所以还是本方法手写 <!--wxml--><!--蒙版(渐出淡去效果)--><view class=" ...
- 小程序 - 图片列表显示lazyload效果
在做一个短视频平台,涉及到的都是一些列表模块.因为小程序没有提供lazyload api,所以只能自己写一个了... 开发涉及 <scroll-view></scroll-view& ...
- 微信小程序实现滑动删除效果
在一些app中,随处可见左滑动的效果,在微信小程序中,官方并未提供相关组件,需要我们自己动手写一个类似的效果 下面仅列举出核心代码,具体的优化需要根据你自身的需求 <view class='li ...
- 使用movable-view制作可拖拽的微信小程序弹出层效果。
仿了潮汐睡眠小程序的代码.[如果有侵权联系删除 最近做的项目有个弹出层效果,类似音乐播放器那种.按照普通的做了一般感觉交互不是很优雅,设计妹子把潮汐睡眠的弹层给我看了看,感觉做的挺好,于是乘着有空仿照 ...
- JS 条形码插件--JsBarcode 在小程序中使用
在小程序中的使用: utils文件夹下 barcode.js 粘粘以下代码 var CHAR_TILDE = 126 var CODE_FNC1 = 102 var SET_STARTA = 103 ...
- 微信小程序动态显示项目倒计时效果
效果: wxml代码: <view class='spellNum'> <view> <text style='color: #fff;'>团长</text& ...
- [原创]微信小程序 实现 圆环 百分百效果
1.最终效果 2.技术点:a. css3 clip-path , b.根据角度和直边计算另一个直边的长度 3.实现思路: a.3个层(灰色圆形层, 红色圆形层,白色圆形层) ,其中灰色和红色层大小一 ...
- 微信小程序实现验证码倒计时效果
效果图 wxml <input class='input-pwd' placeholder="新密码" placeholder-style='color: #000' pas ...
随机推荐
- 虚拟机Ubuntu(18.04.2)下安装配置Hadoop(2.9.2)(伪分布式+Java8)
[本文结构] [1]安装Hadoop前的准备工作 [1.1] 创建新用户 [1.2] 更新APT [1.3] 安装SSH [1.4] 安装Java环境 [2]安装和配置hadoop [2.1] Had ...
- C# 9.0 新特性预览 - 顶级语句
C# 9.0 新特性预览 - 顶级语句 前言 随着 .NET 5 发布日期的日益临近,其对应的 C# 新版本已确定为 C# 9.0,其中新增加的特性(或语法糖)也已基本锁定,本系列文章将向大家展示它们 ...
- 刷题[GKCTF2020]
[GKCTF2020]CheckIN 解题思路 打开直接是源码: <title>Check_In</title> <?php highlight_file(__FILE_ ...
- phpStudy8.1.0.1配置子域名多网站
版本 这里phpStudy版本为8.1.0.1: 步骤 假设域名为:domain.com:公网IP地址为:42.33.33.33 首先云解析中配置,添加子域名A记录直接指向你的公网IP: ep.dom ...
- ARM架构下的Docker环境，OpenJDK官方没有8版本镜像，如何完美解决？
为什么需要ARM架构下的OpenJDK8的Docker镜像? 对现有的Java应用,之前一直运行在x86处理器环境下,编译和运行都是JDK8,如今在树莓派的Docker环境运行(或者其他ARM架构电脑 ...
- Cypress系列（60）- 运行时的截图和录屏
如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 背景 在测试运行时截图和录屏能够在测试错 ...
- 动态生成简约MVC请求接口|抛弃一切注解减少重复劳动吧
背景 目前创建一个后端请求接口给别人提供服务,无论是使用SpringMVC方式注解,还是使用SpringCloud的Feign注解,都是需要填写好@RequestMap.@Controller.@Pa ...
- django 3.1 序列化讲述
序列化Django对象¶ Django的序列化框架提供了一种将Django模型"翻译"为其他格式的机制.通常,这些其他格式将基于文本,并用于通过电线发送Django数据,但是序列化 ...
- 079 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 01 初识面向对象 04 实例化对象
079 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 01 初识面向对象 04 实例化对象 本文知识点:实例化对象 说明:因为时间紧张,本人写博客过程中只是对知 ...
- Python+Appium自动化测试(2)-appium连接真机启动app
app自动化测试的第一步,是启动被测app.appium环境搭建好后,我们就可以连接真机启动app了.环境为windows,Appium1.18.0,Android手机,被测app为今日头条app,让 ...