CSS自定义导航栏悬浮(三种实现方式)

主要目的

提供三种自定义导航栏悬浮的方法

方法一:

• 导航栏 css 代码

<view class="navcontainer">
    <view style="{{ statusBarStyle }}"></view>
    <view class="nav-bar" style="{{ navBarStyle }}">
        {{ title }}
        <view class="icons">
            <image class="back" bind:tap="back" wx:if="{{ back == 'true' }}" src="/assets/imgs/nav_back.png"></image>
            <image class="home" bind:tap="home" wx:if="{{ back == 'true' }}" src="/assets/imgs/nav_home.png"></image>
        </view>
    </view>
</view>

在自定义组件中设定css 样式:

.navcontainer { 
    position: sticky;
    top: 0;
    z-index: 99;
} 

备注:

• 当没有到达0位置的时候，position相当于static
• 当没有到达0位置的时候，position相当于fixed
  问题：在真机上面是没有效果的
  原因：将这个属性设置到自定义组件中。

方法二:

利用 position: fixed

• 给页面外层包一个view，padding-top: 动态的值
  自定义导航栏 css 样式

.navcontainer { 
    position: fixed; 
    width: 100%;
    z-index: 99;
    top: 0;
} 

image.png

方法三:

利用 position: fixed

• 在自定义的nav-bar中添加一个展位的view，height: 动态的值

.navcontainer { 
    position: fixed; 
    width: 100%;
    z-index: 99;
    top: 0;
} 

image.png