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 ...

随机推荐

java Synchronized集合
在Collections存在相关"Synchronized"支持同步的集合, 在java1.0 也存在"Vector"; 为什么会选择放弃"Vecto ...
HotSpot VM执行引擎的实现
Java代码的执行分类: 第一种是将源代码编译成字节码文件,然后再运行时通过解释器将字节码文件转为机器码执行第二种是编译执行(直接编译成机器码).现代虚拟机为了提高执行效率,会使用即时编译技术(JI ...
vue +signalR
概述:ASP.NET Core SignalR是一种开放源代码库,可简化将实时 web 功能添加到应用程序的功能. 实时 web 功能使服务器端代码可以立即将内容推送到客户端. 这玩意的概念我就不多讲 ...
spring多模块之间的调用
https://blog.csdn.net/tomcat_2014/article/details/50206197?locationNum=5
Istio 运维实战系列（3）：让人头大的『无头服务』-下
本系列文章将介绍用户从 Spring Cloud,Dubbo 等传统微服务框架迁移到 Istio 服务网格时的一些经验,以及在使用 Istio 过程中可能遇到的一些常见问题的解决方法. 失败的 Eur ...
决策树防止过拟合（预剪枝(Pre-Pruning)）
预剪枝(Pre-Pruning):预剪枝就是在构造决策树的过程中,先对每个结点在划分前进行估计,若果当前结点的划分不能带来决策树模型泛华性能的提升,则不对当前结点进行划分并且将当前结点标记为叶结点.
Web开发初探之JavaScript 快速入门
本文改编和学习自 A JavaScript Primer For Meteor 和 MDN Web教程前文 Web开发初探概述本文以介绍 JavaScript 为主,初学者掌握本文的内容后,将能 ...
ByPass Mode（略过模式或旁路模式）
参考: 1. https://baike.baidu.com/item/%E6%97%81%E8%B7%AF%E6%A8%A1%E5%BC%8F/3120563 2. https://zhidao.b ...
c++ 中. 和 ->，波浪号 ~ 符号怎么用 ————很重要
参考:https://www.cnblogs.com/Simulation-Campus/p/8809999.html 1. 用在类中的析构函数之前,表示该函数是析构函数.如类A的析构函数 clas ...
Matlab中imagesc用法
来源:https://ww2.mathworks.cn/help/matlab/ref/imagesc.html?searchHighlight=imagesc&s_tid=doc_srcht ...

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

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

随机推荐

热门专题