当前位置：网站首页>Applet: page scrolling to a certain position navigation bar fixed effect

Applet: page scrolling to a certain position navigation bar fixed effect

2022-07-21 01:05:00 【Front end life of Lvan】

Code

<!--index.wxml-->
<scroll-view scroll-y class="container" bindscroll="scroll">
  <view class="nav-top {
    { scrollTop > 300 ? 'fix-top' : '' }}">
     Top navigation {
    {
     scrollTop }}
  </view>
  <view wx:for="{
    { 120 }}" wx:key="item">{
    {
     item }}</view>
</scroll-view>

// index.js
Page({
    
  data: {
    
    scrollTop: 0
  },
  scroll(e) {
    
    console.log(e)
    const scrollTop = e.detail.scrollTop
    this.setData({
    scrollTop})
  },
})

Printed here e yes ：
Insert picture description here

/**index.wxss**/
.container {
    
  //  Remember that this must be added 
  height: 100vh;
}
.nav-top {
    
  width: 100%;
  height: 100rpx;
  background-color: #f00;
}
.fix-top {
    
  position: fixed;
  top: 0;
  background-color: #ff0;
}