uniapp自定义标题栏，滚动时对应标题，点击标题时滚动到相应位置

<view class="scroll-all-box" id="menus">
	<view :class="'scroll-menus' + (fixed ? ' fixed-menus' : '')">
		<view :class="'scroll-menu-item' + (type == 1 ? ' active' : '')" @click="changeMenu(1)">费用说明</view>
		<view :class="'scroll-menu-item' + (type == 2 ? ' active' : '')" @click="changeMenu(2)">预定须知</view>
		<view :class="'scroll-menu-item' + (type == 3 ? ' active' : '')" @click="changeMenu(3)">产品详情</view>
	</view>
	<view style="height: 85rpx" v-if="fixed"></view>
	<view class="info-box" id="box1">
		<view class="info-title">费用说明</view>
		<view class="info-content" v-html=""></view>
	</view>
	<view class="info-box" id="box2">
		<view class="info-title">预定须知</view>
		<view class="info-content" v-html=""></view>
	</view>
	<view class="info-box" id="box3">
		<view class="info-title">产品详情</view>
		<view class="info-content" v-html=""></view>
	</view>
</view>

<script>
    const device = uni.getSystemInfoSync();
	const ratio = device.windowWidth / 750;
    export default {
        data() {
			return {
				top: 0,
				fixed: false,
				type: 0,
				down: false,
			}
		},
        onLoad(options) {
			let rect = uni.getMenuButtonBoundingClientRect();
			this.top = (rect.top - device.statusBarHeight) * 2 + rect.height + device.statusBarHeight;
		},
		onPageScroll(e){
			let query = uni.createSelectorQuery()
				query.select("#menus").boundingClientRect(res => {
			　　　　if(res.top < 0){
						this.fixed = true
					}else{
						this.fixed = false
					}
				}).exec()
				
				if (this.down) {
					return
				}else{
					this.down = true
					for(let i = 1; i < 4; i++) {
						query.select("#box" + i).boundingClientRect(res => {
							if(res.top < 0) {
								this.type = i
							}
						}).exec()
					}
					this.down = false
				}
		},
        methods: {
            changeMenu(e) {
				this.down = true
			    let index = e;
				let that = this
			    const query = uni.createSelectorQuery(); //创建节点查询器
			    query.select('#box' + index).boundingClientRect(); //选择toViewid获取位置信息
			    query.selectViewport().scrollOffset(); //获取页面查询位置的
			    query.exec(function (res) {
			        let scrollTop = res[0].top + res[1].scrollTop - 110 * ratio - that.top;
			        uni.pageScrollTo({
			            scrollTop: scrollTop + 4,
			            duration: 0
			        });
			        that.type = index
					setTimeout(()=>{
						that.down = false
					},1000)
			    });
			},
        }
    }
</script>

<style scoped lang="scss">
    .scroll-all-box {
		margin: 24rpx 0;
	
		.scroll-menus {
		    padding: 0 40rpx;
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		    font-size: 29rpx;
		    color: #333;
		    height: 84rpx;
		    border-bottom: 1rpx solid #d9d9d9;
			
			.scroll-menu-item {
			    position: relative;
			    line-height: 84rpx;
			}
			
			.scroll-menu-item.active::after {
			    content: '1';
			    font-size: 0;
			    display: block;
			    position: absolute;
			    width: 46rpx;
			    height: 6rpx;
			    border-radius: 3rpx;
			    background: #248BAA;
			    left: 50%;
			    margin-left: -23rpx;
			    bottom: 0rpx;
			}
		}
		
		.fixed-menus {
		    position: fixed;
			top: 0;
		    left: 0;
		    right: 0;
		    background: white;
		    z-index: 1;
		}
		
		.info-box {
		    padding: 20rpx 40rpx;
			
			.info-title {
			    font-size: 35rpx;
			    font-weight: bold;
			    color: #000;
			}
			
			.info-content {
				width: 697rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 22rpx 14rpx;
				margin-top: 20rpx;
			}
		}
	}
</style>