移动端弹窗时，弹窗可以滚动body禁止滚动。

2018.7.5 在写手机端的时候，遇到一个弹框问题
滑动弹框的时候，body跟着滚动。就想能不能禁止body滚动。

预览地址：http://106.15.190.226/m/team.html（注：移动端需要使用移动端视图）

手机站-管理团队-设计稿

参考文章：

移动端弹出层滚动时禁止body滚动

我使用了里面的第二种方法：

//头部滚动添加样式
$(function () {
   var offset = $('body').offset();
   $(window).scroll(function () {
      var scrollTop = $(window).scrollTop();
      if (offset.top < scrollTop) {
          $('#header').addClass('fixed');
      }
      else {
          $('#header').removeClass('fixed');
      }
   });
});


//从这开始
var $teamPanelOneListBtn = $('.teamPanelOneList li>a');
var $teamPanelTwoListBtn = $('.teamPanelTwoList li>a');
var $personageTips = $('#one-alert .personageTips');
var $personageTeamTips = $('#two-alert .personageTeamTips');

var needTop = 0;
$teamPanelOneListBtn.click(function () {
    $personageTips.eq($(this).parent().index()).addClass('active').siblings().removeClass('active');
    needTop = $(window).scrollTop();//获取页面的scrollTop；
    $('body').css("top",-needTop+"px");//给body一个负的top值；
    $('body').addClass('alert');//给body增加一个类，position:fixed;
    // $('html').addClass('alert');
})
$teamPanelTwoListBtn.click(function () {
    $personageTeamTips.eq($(this).parent().index()).addClass('active').siblings().removeClass('active');
    needTop = $(window).scrollTop();//获取页面的scrollTop；
    $('body').css("top",-needTop+"px");//给body一个负的top值；
    $('body').addClass('alert');//给body增加一个类，position:fixed; 
    // $('html').addClass('alert');
})
$('.personageTips .close').click(function () {
    $('.personageTips').removeClass('active');
    $('body').removeClass('alert');//去掉给body的类
    $('body').css("top",0);//清楚赋予的top值
    $(window).scrollTop(needTop);//设置页面滚动的高度，如果不设置，关闭弹出层时页面会回到顶部。
})

#### 可忽略该样式
body.alert{
    position: fixed;
}
body.alert #header{
    background-color: #fff;
}
body.alert #header .headerField .logoArea #whitelogo{
    display: none;
}
body.alert #header .headerField .logoArea #bluelogo{
    display: block;
}
body.alert #header .menuBtn span{
    border: 0.12em solid #333333;
}
body.alert #header .menuBtn .line::after{
    background-color: #333;
}

添加该样式的原因。点击弹窗后。header头部定位的白色就消失了。所以手动再添加上样式。
头部的logo是两个svg切换的。