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()方法所以还是本方法手写 <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 ...

随机推荐

Win10环境下Hadoop(单节点伪分布式)的安装与配置--bug(yarn的8088端口打不开+)
一.本文思路 [1].配置java环境–JDK12(Hadoop的底层实现语言是java,hadoop运行需要JDK环境) [2].安装Hadoop 1.解压hadop 2.配置hadoop环境变量 ...
从Class源码看反射
日常敲码中,如果想要在程序运行阶段访问某个类的所有信息,并支持修改类的状态或者行为的话,肯定会用到反射,而反射靠的就是Class类.Java的动态代理也用到了这个东西,所以了解其基本操作在苦逼的CRU ...
C++11 随机数生成器
背景考试想造浮点数然后发现不会正好下午被虎哥茶话会谈到了一些不会的问题balabala的被告知\(C++11\)有些神奇特性(哦豁) 然后就学习了一手看上去没什么用的随机数生成器\(QwQ\) ...
关于windows服务器的Security安全类日志的导出
对于windows服务器,日志的分类会有很多,可以通过wevtutil el 列出有时可能会对Security安全类日志进行审计,这里简单讲一下安全类日志的导出方法 1.直接在cmd中执行 wevt ...
JAVA简单上传图片至七牛
utils package com.example.demo.utils; import com.alibaba.fastjson.JSONObject; import com.qiniu.commo ...
【随笔】Apache降权和禁用PHP危险函数
测试环境: Windows Server 2003 + phpstudy 首先在win2003里运行phpstudy,这里注意需要选择应用系统服务模式,应用之后重启phpstudy. 打开系统服务(开 ...
在 Visual Studio 中创建一个简单的 C# 控制台应用程序
转载:https://blog.csdn.net/qq_43994242/article/details/87260824 快速入门:使用 Visual Studio 创建第一个 C# 控制台应用 h ...
DORIS系统概述
DORIS(Doppler Orbitography and Radio-positioning Integrated by Satellite)(多普勒轨道学与无线电定位集成卫星),它是由法国Cne ...
Flutter 1.22 正式发布
支持iOS 14和Android 11,新的i18n和l10n支持,可用于生产的Google Maps和WebView插件,新的App Size工具等等! 作者:Chris Sells 原文:http ...
SSIS 生成文件
程序说明此SSIS的目标是生成如下的文本文件此文件的列由TAB键分割,可以使用notepad++来查看这样就能够看清TAB键了文件由%H%表示头部和%D%表示的细节部分以下为程序开发使用的V ...

js 实现吸顶效果 || 小程序的吸顶效果

js 实现吸顶效果 || 小程序的吸顶效果的更多相关文章

随机推荐

热门专题