导航栏滚动

在项目，遇到导航栏滚动，滚到到窗口顶部悬停；滚动导航栏的产品，对应的导航栏选中。

html:

<div id="nav" >

        <a class="xyifu"   data-id="yifu" @click="goscrol">衣服</a>

        <a class="xxiezi"   data-id="xiezi" @click="goscrol">鞋子</a>

        <a  class="xmaozi" data-id="maozi" @click="goscrol">帽子</a>

</div>

<div id="yifu">衣服列表</div>

<div id="xiezi">鞋子列表</div>

<div id="maozi">帽子列表</div>

js:

//点击对应的导航栏，跳转到对应商品列表

goscrol($event) {

      var id = $event.target.dataset.id;

      var $scrollHeight = $("#" + id).offset().top;

      $("html, body").animate(

        {

          scrollTop: $scrollHeight

        },

        500

      );

},

window.onload = function() {

      var arr = [

        { id: "yifu", height: $("#yifu").height() },

        { id: "xiezi", height: $("#xiezi").height() },

        { id: "maozi", height: $("#maozi").height() }

      ];

      var box = document.getElementById("nav");

      var topmargin = box.offsetTop;

　　//不同设备，安卓，iphone

      var userAgent = navigator.userAgent.toLowerCase();

      var isIphone = userAgent.match(/iphone os/i) == "iphone os";

      var isAndroid = userAgent.match(/android/i) == 'android';

      $(window).on("scroll", function() {

　　　　//滚动页面，让导航栏悬浮在窗口顶部

      　　var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

　　　　if(isIphone){

　　　　　　scroll >= topmargin - 50 ? $("#nav").addClass("postplayIOS") : $("#nav").removeClass("postplayIOS");

　　　　}else{

　　　　　　scroll >= topmargin - 50 ? $("#nav").addClass("postplayAndroid") : $("#nav").removeClass("postplayAndroid");

　　　　}

 　　　　//当滚动时，导航栏没到窗口顶部，移除选中样式

 　　 　 if (document.getElementById(arr[0].id).offsetTop - $(window).scrollTop() > 90 ) {

            　　$(".x" + arr[0].id).removeClass("redfont");

            }

 　　　//当滚动到对应产品列表时，导航栏添加对应选中样式

        　for (var i = 0; i < arr.length; i++) {

          　　var nowbox = document.getElementById(arr[i].id);

          　　if (nowbox.offsetTop - $(window).scrollTop() < 90) {

           　　 $(".x" + arr[i].id).addClass("redfont").siblings().removeClass("redfont");

         　　 }

        　}

      });

};

CSS:

.postplayIOS {

  position: sticky;

  position: -webkit-sticky;

  left: 0;

  top: 0;

}

.postplayAndroid {

  position: fixed;

  left: 0;

  top: 0;

}

#nav .redfont {

  border-bottom: 2px solid #f9f100;

}