jQuery动画PushX移动固定div

时间:2015-12-17 16:51:25

标签: javascript jquery html css

我正在使用一个模板,该模板利用Javascript和jQuery将导航栏变为可从左侧滑入和滑出的可切换窗格。我的网站上的所有内容都适用于它,除了固定在页面底部的固定div。它总是向上移动到导航栏中最低列表项的级别。

相关的JS代码是:

//Javascript that controls the nav bar once the screen reaches a small size

plugins: {
	layers: {
		config: {
			mode: 'transform'
		},
		navPanel: {
			animation: 'pushX',
			breakpoints: 'medium',
			clickToHide: true,				
            height: '100%',
			hidden: true,
			html: '<div data-action="moveElement" data-args="nav"></div>',
            orientation: 'vertical',
			position: 'top-left',
			side: 'left',
			width: 250
		},
		navButton: {
			breakpoints: 'medium',
			height: '4em',
			html: '<span class="toggle" data-action="toggleLayer" data-args="navPanel"></span>',
			position: 'top-left',
			side: 'top',
			width: '6em'
		}
	}
}
//CSS for the bar that moves undesireably

#button_bar {
	position: fixed !important;
	bottom: 0 !important;
	background-color: #303030;
	z-index: 10 !important;
}

//Computed CSS for the bottom div (button_bar)

background-color
#303030
border-bottom-color
#444
border-bottom-style
none
border-bottom-width
0px
border-image-outset
0 0 0 0
border-image-repeat
stretch stretch
border-image-slice
100% 100% 100% 100%
border-image-source
none
border-image-width
1 1 1 1
border-left-color
#444
border-left-style
none
border-left-width
0px
border-right-color
#444
border-right-style
none
border-right-width
0px
border-top-color
#444
border-top-style
none
border-top-width
0px
bottom
0px

inline:204
#button_bar0px
box-sizing
border-box
color
#444
font-family
"Lato",Helvetica,sans-serif
font-feature-settings
normal
font-kerning
auto
font-language-override
normal
font-size
16px
font-size-adjust
none
font-stretch
normal
font-style
normal
font-synthesis
weight style
font-variant
normal
font-variant-alternates
normal
font-variant-caps
normal
font-variant-east-asian
normal
font-variant-ligatures
normal
font-variant-numeric
normal
font-variant-position
normal
font-weight
300
line-height
26.4px
margin-bottom
0px
margin-left
0px
margin-right
0px
margin-top
0px
padding-bottom
0px
padding-left
0px
padding-right
0px
padding-top
0px
position
fixed
vertical-align
baseline
width
823px
z-index
10
-moz-border-bottom-colors
none
-moz-border-left-colors
none
-moz-border-right-colors
none
-moz-border-top-colors
none

Before, desirable layout After, undesirable div movement

0 个答案:

没有答案