滚动条滚动时触发顶部tab切换

最近在实现一个滚动条滚动时触发顶部tab切换的功能，那么我们如何来实现滚动条滚动时触发顶部tab切换的功能的？下面我们来实现一下
html页面代码：

<div class="tabs" id="gudingweizhi" style="position: absolute; width: 100%;">
                    <div class="backbox"></div>
                    <div class="links Lcfx">
                        <a><h2 class="link active" id="jiudianyudingclick" data-type="order">酒店预订</h2></a>
                        <a><h2 class="link" id="jiaotongweizhiclick" data-type="router">交通位置</h2></a>
                        <a><h2 class="link" id="jiudiankaikuangclick" data-type="intro">酒店概况</h2></a>
                        <a><h2 class="link" id="jiudiandianpingclick" data-type="comment">酒店点评</h2></a>
                    </div>
</div>

JS页面方法绑定：

//滚动条滚动时触发
window.onscroll = function () {
                var julidingbu = document.getElementById('Pdetail_part2').offsetTop;
//获取导航条距离顶部的高度
                var weizhiosTop = document.getElementById('Pdetail_map').offsetTop-44;
//获取内容距离顶部的高度 
                var gaikuangosTop = document.getElementById('Pdetail_basicinfo').offsetTop-44;
//获取内容距离顶部的高度
                var dianpingosTop = document.getElementById('jiudiandianpingdiv').offsetTop-44;
//获取内容距离顶部的高度
var obtn = document.getElementById('gudingweizhi');
//获取页面可视区的高度
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
                if (osTop >= julidingbu) {
                    obtn.style.position = 'fixed';
                    obtn.style.width = '1190px';
                    obtn.style.left='80px';
                } else {
                    obtn.style.position = 'absolute';
                    obtn.style.width = '100%';
                    obtn.style.left = '0';
                }
                if (osTop < weizhiosTop)
                {
                    $(".Pdetail_part2 h2").removeClass('active');
                    $("#jiudianyudingclick").addClass('active');
                }
                else if (osTop >= weizhiosTop && osTop < gaikuangosTop)
                {
                    $(".Pdetail_part2 h2").removeClass('active');
                    $("#jiaotongweizhiclick").addClass('active');
                }
                else if (osTop >= gaikuangosTop && osTop < dianpingosTop) {
                    $(".Pdetail_part2 h2").removeClass('active');
                    $("#jiudiankaikuangclick").addClass('active');
                }
                else if (osTop >= dianpingosTop) {
                    $(".Pdetail_part2 h2").removeClass('active');
                    $("#jiudiandianpingclick").addClass('active');
                }
}

效果截图：


这样你就可以实现滚动条滚动时触发顶部tab切换功能了，是不是很简单呢。