CSS如果元素可见,则更改主体边距大小
我在页面顶部有一个固定的位置菜单栏(可以说)50px高,身体也有50px的顶部边距。 在菜单栏上方,可能会有一个错误消息,其高度可能会有所不同。 这种变化意味着身体的上边缘需要相应地改变。
我想避免在这里使用javascript,但如果这是不可能的,我会用它作为最后的手段。
http://subjectplanner.co.uk/Me/是该页面的一个例子。 如果你点击错误信息,它将消失,这就是页面的外观。
HTML代码:
<div id="NavWrapper">
<div id="NavErrorWrapper" class="Notification">
<div id="NavError">You must be logged in!</div>
</div>
<div id="NavBar">
<a href="/index" id="NavLogo"><img src="logo.png" /></a>
<div class="HideIfJavaOff"><a href="#" id="NavMenu"><img src="menu.png" /></a></div>
<div class="MenuClear"></div>
<!-- MENU LIST HERE -->
</div>
</div>
<!-- End Floating Navigation Bar -->
<!-- Responsive Wrapper -->
<div id="MainWrapper">
<!-- CONTENT HERE -->
</div>
</body>
CSS代码:
#NavWrapper{
width: 100%;
z-index: 1;
top: 0;
position: fixed;
height:70px;
}
#NavErrorWrapper{
z-index: 3;
text-align: center;
width: 100%;
padding: 7px;
background-color: rgb(255, 148, 148);
border-bottom-style: solid;
border-bottom-color: rgb(252, 88, 88);
border-bottom-width: 3px;
display: block;
}
#NavError{
width: 100%;
max-width: 900px;
margin: 0 auto;
}
#NavBar{
overflow: hidden;
display: block;
width: inherit;
max-width: 900px;
z-index: 2;
height:auto;
margin: 0 auto;
background-color: #fff;
}
我不认为只有CSS解决方案就是你将会在这里得到的,就充分动态和让你的内容按比例适合而言。 对于最少量的JavaScript,当触发错误时,我会在主体上切换一个类,在错误被移除后被删除。 然后在CSS中,您可以应用必要的填充/转换/任何以保持适当的比例。
你不能在CSS中遍历DOM,因此你需要JS。 您可以使用以下内容:
var errorMessage = document.getElementById('NavErrorWrapper');
if(errorMessage){
document.body.style.marginTop = '115px';
}
检查是否存在错误消息。 如果是这样,请修改余量。 尽管如此,假定错误消息将始终是相同的高度。 如果它有一个动态高度,你将不得不计算它,然后像这样将它添加到80px
:
var errorMessage = document.getElementById('NavErrorWrapper');
if(errorMessage){
document.body.style.marginTop = (errorMessage.offsetHeight + 80) + 'px';
}
如果元素被点击并因此被隐藏,只需使用以下内容将边距返回到80px
:
if(errorMessage) {
errorMessage.addEventListener('click',function(){
document.body.style.marginTop = '80px';
});
}
如果您需要测试该元素是否隐藏,如标题所示:
function isHidden(el) {
if (el.offsetParent === null) {
return true;
}
return false;
}
var errorMessage = document.getElementById('NavErrorWrapper');
if(errorMessage && !isHidden(errorMessage)){
document.body.style.marginTop = (errorMessage.offsetHeight + 80) + 'px';
}
if(errorMessage) {
errorMessage.addEventListener('click',function(){
document.body.style.marginTop = '80px';
});
}
实现这一点的方法是通过javascript和css的组合让我们假设我们将使用您目前实现的所有css。
对于css部分,我们将使用一个名为'errorReveal'的新类,并且我们将根据是否希望显示错误来将它附加到navWrapper div。
.errorReveal {
transform: translate3d(0,45px,0);
-webkit-transform: translate3d(0,45px,0);
-moz-transform: translate3d(0,45px,0);
-ms-transform: translate3d(0,45px,0);
-o-transform: translate3d(0,45px,0);
}
45px应该调整到你的错误信息的大小。
以下是更改对象类的快速函数,将用于添加此类。
var togClass ( obj, class ) {
if( obj.className.search( class ) == -1 ) {
obj.className += class;
} else {
obj.className.replace( class, "");
}
}
接下来很容易决定何时使用此功能。
var elNavWrapper = document.getElementById("NavWrapper");
var someErrorCheckFunction( fakeArg){
//Checkin some stuff
//checkin some other stuff
var error = true;
if(error){
togClass( elNavWrapper, "errorReveal" );
}
}
那么只需将一个点事件添加到errorMessage中即可关闭该类
var elErrorWrapper = document.getElementById("NavErrorWrapper");
elErrorWrapper.addEventListener( "mousedown", function(){
togClass( elNavWrapper, "errorReveal" );
});
而且应该这样做。 祝你好运!
PS。 为了动态调整大小,你需要使用javascript来获取ErrorWrapper的offsetHeight,然后使用javascript来更改transform属性,该函数将替换togClass函数。
链接地址: http://www.djcxy.com/p/83583.html上一篇: CSS Change body margin size if an element is visible
下一篇: Selenium 3.0.1 with safaridriver failing on waitForElementVisible()