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) 编辑收藏举报

刷新页面返回顶部

Ralapgao

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

公告