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>


后续优化

 

posted @ 2019-08-06 17:49  Ralapgao  阅读(2298)  评论(0编辑  收藏  举报