• 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;
   100%;
  top: 0;
  left: 0;
  z-index: -1;
}
.outside-box {
  position: absolute;
  left: 0;
  top: 0;
   100%;
}
.show-eg-img {
  position: absolute;
  left: 0;
  top: 0;
  height: 220px;
   100%;
}
.inside-img {
  position: fixed;
  left: 0;
  top: 0;
  height: 100rpx;
   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;
   100%;
  left: 0;
  top: 0;
}

    简单的吸顶效果 

    <!DOCTYPE>
<html>
<head>
<style type="text/css">
    body {
        padding:0;
        margin:0;
    }
    #nav {
        100%;
        height:60px;
        background:#39f;
        color:#fff;
        line-height:60px;
        text-align:center;
        padding:0;
        margin:0;
    }
    #nav li {
        float:left;
        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>


    后续优化
  • 相关阅读:
    OpenCV -- Mat 转 QImage 函数
    Qt--checkbox
    QT 发布release版本
    JS_0014：JS刷新页面
    JS_0013：JS获取文件后缀名
    JS_0012：JS从一个有规则的字符串中随机选择一个字符再循环生成一个新的无规则的字符串
    JQuery0016：JQuery等待页面全部加载完后执行代码块
    JQuery0015：JQuery查找指定元素并修改其属性
    JS_0011：通过JS给div添加html标签内容
    JS_0010：获取url中指定的参数
  • 原文地址：https://www.cnblogs.com/ralapgao/p/11310675.html
Copyright © 2020-2023  润新知