const rootEl = document.documentElement;
const navbarTopEl = document.getElementById('navbar');
const navbarBottomEl = document.getElementById('navbarBottom');
- const fixTopEl = document.getElementById('navbarFixTop');
- const fixTopElIcon = fixTopEl.querySelector('.fa');
const fixBottomEl = document.getElementById('navbarFixBottom');
const fixBottomElIcon = fixBottomEl.querySelector('.fa');
- let fixedTop = false;
let fixedBottom = false;
- fixTopEl.addEventListener('click', event => {
- fixedTop = !fixedTop;
-
- if (fixedTop) {
- fixTopEl.className = 'button is-success';
- fixTopElIcon.className = 'fa fa-check-square-o';
- rootEl.classList.add('has-navbar-fixed-top');
- navbarTopEl.classList.add('is-fixed-top', 'has-shadow');
- } else {
- fixTopEl.className = 'button is-link';
- fixTopElIcon.className = 'fa fa-square-o';
- rootEl.classList.remove('has-navbar-fixed-top');
- navbarTopEl.classList.remove('is-fixed-top', 'has-shadow');
- }
- });
-
fixBottomEl.addEventListener('click', event => {
fixedBottom = !fixedBottom;
<h4 class="title is-5">Try it out!</h4>
<div id="navbarToggles" class="buttons">
- <a id="navbarFixTop" class="button is-link">
- <span class="icon">
- <i class="fa fa-square-o"></i>
- </span>
- <span>Fix <strong>top</strong> navbar</span>
- </a>
<a id="navbarFixBottom" class="button is-link">
<span class="icon">
<i class="fa fa-square-o"></i>
var rootEl = document.documentElement;
var navbarTopEl = document.getElementById('navbar');
var navbarBottomEl = document.getElementById('navbarBottom');
- var fixTopEl = document.getElementById('navbarFixTop');
- var fixTopElIcon = fixTopEl.querySelector('.fa');
var fixBottomEl = document.getElementById('navbarFixBottom');
var fixBottomElIcon = fixBottomEl.querySelector('.fa');
- var fixedTop = false;
var fixedBottom = false;
- fixTopEl.addEventListener('click', function (event) {
- fixedTop = !fixedTop;
-
- if (fixedTop) {
- fixTopEl.className = 'button is-success';
- fixTopElIcon.className = 'fa fa-check-square-o';
- rootEl.classList.add('has-navbar-fixed-top');
- navbarTopEl.classList.add('is-fixed-top', 'has-shadow');
- } else {
- fixTopEl.className = 'button is-link';
- fixTopElIcon.className = 'fa fa-square-o';
- rootEl.classList.remove('has-navbar-fixed-top');
- navbarTopEl.classList.remove('is-fixed-top', 'has-shadow');
- }
- });
-
fixBottomEl.addEventListener('click', function (event) {
fixedBottom = !fixedBottom;