Toggle navigation
Toggle navigation
This project
Loading...
Sign in
fe
/
YOHOBUYWAP
·
Commits
Go to a project
GitLab
Go to group
Project
Activity
Files
Commits
Pipelines
0
Builds
0
Graphs
Milestones
Issues
0
Merge Requests
0
Members
Labels
Wiki
Forks
Network
Create a new issue
Download as
Email Patches
Plain Diff
Browse Files
Authored by
梁志锋
9 years ago
Commit
6bd687b81d09da0d6f4567eaddaefbaea8ec9396
1 parent
9d84451a
侧边栏字体间距缩小,禁止滚动
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
14 additions
and
110 deletions
static/js/home/home.js
static/sass/home/_side-nav.scss
static/js/home/home.js
View file @
6bd687b
...
...
@@ -24,97 +24,6 @@ var start = 0,
lazyLoad
(
$
(
'img.lazy'
));
function
preventDefault
(
e
)
{
e
=
e
||
window
.
event
;
e
.
preventDefault
&&
e
.
preventDefault
();
e
.
returnValue
=
false
;
}
function
stopPropagation
(
e
){
e
=
e
||
window
.
event
;
e
.
stopPropagation
&&
e
.
stopPropagation
();
e
.
cancelBubble
=
false
;
}
/**function innerScroll(e){
// 阻止冒泡到document
// document上已经preventDefault
stopPropagation(e);
var delta = e.wheelDelta || e.detail || 0;
var box = $(this).get(0);
if($(box).height() + box.scrollTop >= box.scrollHeight){
if(delta < 0) {
preventDefault(e);
return false;
}
}
if(box.scrollTop === 0){
if(delta > 0) {
preventDefault(e);
return false;
}
}
// 会阻止原生滚动
// return false;
}**/
/**var disableScroll = function(){
$(document).on('mousewheel', preventDefault);
$(document).on('touchmove', preventDefault);
};
var enableScroll = function(){
$(document).off('mousewheel', preventDefault);
$(document).off('touchmove', preventDefault);
};
// 内部可滚
$sideNav.on('touchmove mousewheel', stopPropagation);
// 外部禁用
disableScroll();
// 移动端touch重写
var startX, startY;
$sideNav.on('touchstart', function(e){
startX = e.originalEvent.touches[0].pageX;
startY = e.originalEvent.touches[0].pageY;
});**/
// 仿innerScroll方法
/**$sideNav.on('touchmove', function(e){
e.stopPropagation();
var deltaX = e.originalEvent.touches[0].pageX - startX;
var deltaY = e.originalEvent.touches[0].pageY - startY;
// 只能纵向滚
if(Math.abs(deltaY) < Math.abs(deltaX)){
e.preventDefault();
return false;
}
var box = $(this).get(0);
if($(box).height() + box.scrollTop >= box.scrollHeight){
if(deltaY < 0) {
e.preventDefault();
return false;
}
}
if(box.scrollTop === 0){
if(deltaY > 0) {
e.preventDefault();
return false;
}
}
// 会阻止原生滚动
// return false;
});**/
$
(
'.nav-btn'
).
on
(
'touchstart'
,
function
(
event
)
{
$sideNav
.
css
(
'pointer-events'
,
'none'
);
$mobileWrap
.
addClass
(
'menu-open'
);
...
...
@@ -124,12 +33,6 @@ $('.nav-btn').on('touchstart', function(event) {
event
.
stopPropagation
();
openSideNav
=
true
;
//设置boy高宽,页面不能上下滑动
$
(
'body'
).
css
({
height
:
$
(
window
).
height
(),
overflow
:
'hidden'
});
setTimeout
(
function
()
{
$sideNav
.
css
(
'pointer-events'
,
'auto'
);
},
400
);
...
...
@@ -144,11 +47,6 @@ function hideSideBar() {
$
(
'.overlay'
).
hide
();
$
(
'.sub-nav'
).
removeClass
(
'show'
);
$sideNav
.
removeClass
(
'on'
);
$
(
'body'
).
css
({
height
:
'auto'
,
overflow
:
'auto'
});
//enableScroll();
}
}
...
...
@@ -157,6 +55,10 @@ $('.overlay').on('touchstart', function(e) {
return
false
;
});
$sideNav
.
on
(
'touchmove'
,
function
(
e
)
{
return
false
;
});
//点击一级导航,弹出二级导航
$sideNav
.
on
(
'touchend'
,
'li'
,
function
(
e
)
{
if
(
$
(
this
).
find
(
'.sub-nav'
).
size
()
>
0
)
{
...
...
static/sass/home/_side-nav.scss
View file @
6bd687b
...
...
@@ -14,7 +14,7 @@
@include
transition
(
all
.3s
);
>
ul
{
margin-bottom
:
20
rem
/
$pxConvertRem
;
margin-bottom
:
16
rem
/
$pxConvertRem
;
background
:
#fff
;
border-top
:
1px
solid
#e0e0e0
;
border-bottom
:
1px
solid
#e0e0e0
;
...
...
@@ -22,8 +22,8 @@
li
{
position
:
relative
;
height
:
80rem
/
$pxConvertRem
;
line-height
:
80rem
/
$pxConvertRem
;
height
:
64rem
/
$pxConvertRem
;
line-height
:
64rem
/
$pxConvertRem
;
background
:
#fff
;
&
:after
{
...
...
@@ -45,21 +45,23 @@
a
{
display
:
block
;
height
:
100%
;
padding-left
:
1
10
rem
/
$pxConvertRem
;
padding-left
:
1
08
rem
/
$pxConvertRem
;
color
:
#444
;
}
em
{
font-weight
:
bold
;
font-size
:
2
6
rem
/
$pxConvertRem
;
font-size
:
2
4
rem
/
$pxConvertRem
;
}
.title
{
display
:
inline-block
;
font-size
:
36rem
/
$pxConvertRem
;
vertical-align
:
bottom
;
padding-left
:
1rem
;
// 此处字体小于 12px, 先扩大,再scale缩小
@include
transform
(
scale
(
0
.5
));
transform-origin
:
0
50%
0
;
}
.nav-icon
,
.nav-img
{
...
...
@@ -92,8 +94,8 @@
.first
{
li
{
height
:
100rem
/
$pxConvertRem
;
line-height
:
100rem
/
$pxConvertRem
;
height
:
80rem
/
$pxConvertRem
;
line-height
:
80rem
/
$pxConvertRem
;
border-bottom
:
1px
solid
#e0e0e0
;
&
:last-child
{
...
...
@@ -105,7 +107,7 @@
}
em
{
font-size
:
3
6
rem
/
$pxConvertRem
;
font-size
:
3
2
rem
/
$pxConvertRem
;
}
.nav-img
,
.nav-icon
{
...
...
Please
register
or
login
to post a comment