[英]How can I make a button appear on scroll just using 'plain' html, CSS and Javascript
[英]How can i make a bar appear and dissapear using javascript and css
我試圖制作一個在我單擊按鈕時出現的欄,而在我單擊屏幕的其余部分時消失的欄,但我無法使其正常工作。
HTML:
<div class="header">
<nav class="navbar navbar-default navbar-fixed-top">
<a class="bar" href="">
<i onclick="openbar();" class="glyphicon glyphicon-align-justify"></i>
</a>
<div class="container">
<div class="left">
<h2 class="invisible">hola</h2>
</div>
<div class="center">
<h1 class="title">Project Ignite</h1>
</div>
<div class="right">
<h2 class="invisible">hola</h2>
</div>
</div>
</nav>
</div>
<div class="body">
<div class="container"></div>
<div class="bar" id="bar"></div>
</div>
Javascript:
function openbar() {
document.getElementById('bar').classList.toggle('openbar');
}
CSS:
.bar {
position:absolute;
float: left;
background-color: #F89406;
width: 0%;
height: 100%;
}
.openbar {
position:absolute;
float: left;
background-color: #F89406;
width: 12%;
height: 100%;
}
.bar i {
color: white;
font-size: 32px;
float: left;
position: absolute;
padding-top: 16px;
padding-left: 16px;
}
.icon-bar {
width: 120px;
height: 120px;
color: red;
}
我該怎么做才能解決我的問題? 謝謝高級的moloco PS:我是JS新手
那應該工作:
function openbar() { document.getElementById('bar').classList.toggle('openbar'); }
.bar { position: absolute; float: left; background-color: #F89406; width: 12%; height: 10%; } #bar { display: none; } .openbar { display: block !important; } .bar i { color: white; font-size: 32px; float: left; position: absolute; padding-top: 16px; padding-left: 16px; } .icon-bar { width: 120px; height: 120px; color: red; }
<div class="header"> <nav class="navbar navbar-default navbar-fixed-top"> <a class="bar"> <i onclick="openbar();" class="glyphicon glyphicon-align-justify">click me</i> </a> <div class="container"> <div class="left"> <h2 class="invisible">hola</h2> </div> <div class="center"> <h1 class="title">Project Ignite</h1> </div> <div class="right"> <h2 class="invisible">hola</h2> </div> </div> </nav> </div> <div class="body"> <div class="container"> </div> <div class="bar" id="bar"> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.