diff --git a/sample/mip-nav-slidedown/testNav.html b/sample/mip-nav-slidedown/testNav.html
new file mode 100644
index 000000000..7314ba807
--- /dev/null
+++ b/sample/mip-nav-slidedown/testNav.html
@@ -0,0 +1,74 @@
+
+
+
+
+
+
+ 测试mip-nav-slidedown下拉菜单body不可滚动
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/sample/mip-nav-slidedown/testNavFixed.html b/sample/mip-nav-slidedown/testNavFixed.html
new file mode 100644
index 000000000..86018dada
--- /dev/null
+++ b/sample/mip-nav-slidedown/testNavFixed.html
@@ -0,0 +1,75 @@
+
+
+
+
+
+ 测试mip-nav-slidedown和mip-fixed组合使用
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/mip-nav-slidedown/mip-nav-slidedown.js b/src/mip-nav-slidedown/mip-nav-slidedown.js
index 4c727559c..726e3d94d 100644
--- a/src/mip-nav-slidedown/mip-nav-slidedown.js
+++ b/src/mip-nav-slidedown/mip-nav-slidedown.js
@@ -72,9 +72,8 @@ define(function (require) {
if (window.innerWidth > 767) {
return;
}
-
var $wiseNav = $('#bs-navbar');
-
+ var $navWrapper = $('.mip-nav-wrapper');
if ($wiseNav.hasClass('in')) {
// 关闭菜单
$wiseNav.height('0px');
@@ -85,6 +84,9 @@ define(function (require) {
setTimeout(function () {
$wiseNav.removeClass('in');
}, 500);
+ setTimeout(function () {
+ $navWrapper.removeAttr('style');
+ }, 100);
}
else {
// 打开菜单
@@ -118,6 +120,10 @@ define(function (require) {
var offsetTop = $('mip-nav-slidedown')[0] ? $('mip-nav-slidedown')[0].getBoundingClientRect().top : 0;
var navHeight = window.innerHeight - $('.navbar-header').height() - offsetTop;
$wiseNav.height(navHeight);
+
+ var $navWrapper = $('.mip-nav-wrapper');
+ var navWrapperHeight = window.innerHeight - offsetTop;
+ $navWrapper.height(navWrapperHeight);
// 关闭按钮距离底部固定为90px
closeBtnTop = navHeight - ($('.navbar-right li').height()) * listNum - 90;
if (closeBtnTop > 20) {
diff --git a/src/mip-nav-slidedown/mip-nav-slidedown.less b/src/mip-nav-slidedown/mip-nav-slidedown.less
index 4e1d49691..890a3d9a3 100644
--- a/src/mip-nav-slidedown/mip-nav-slidedown.less
+++ b/src/mip-nav-slidedown/mip-nav-slidedown.less
@@ -1,5 +1,6 @@
.mip-nav-wrapper {
height: 72px;
+ transition: height 0.3s;
&.show {
opacity: 1!important;
}
@@ -7,6 +8,9 @@
display: none;
}
}
+.noscroll {
+ overflow-y: hidden !important;
+}
mip-nav-slidedown{
#bs-navbar {
margin-bottom: 0;
@@ -73,6 +77,7 @@ mip-nav-slidedown{
@media screen and (max-width: 767px) {
.mip-nav-wrapper {
height: 44px;
+ transition: height 0.3s;
#bs-navbar {
height: 0;
transition: height 0.3s;