I try build a landing page using vue.js, with header design like on the picture above.
So, I create a component called "header",with contain content according to the design.
How do I make a fixed navbar, when the page is scrolled the navbar is still on top ?
Another option could be to use the bootstrap-vue package.
It has the b-navbar component which can be made fixed to the top
<b-navbar class="header" fixed="top"></b-navbar>
Example:
const vm = new Vue({el: '#app'})<link href="http://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" rel="stylesheet"/><link href="http://unpkg.com/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="http://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script><script src="http://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script><div id="app">
<!-- ************************************ -->
<!-- Place the fixed prop within b-navbar -->
<!-- ************************************ -->
<b-navbar class="header" type="dark" variant="info" fixed="top">
<b-navbar-brand href="#"> My fixed header </b-navbar-brand>
</b-navbar>
<!-- *********************************** -->
<div style="margin-top: 60px;"><ol><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li></ol></div></div>You can set a fixed navbar by applying the following class.
.header {
position:fixed; /* fixing the position takes it out of html flow - knows
nothing about where to locate itself except by browser
coordinates */
left:0; /* top left corner should start at leftmost spot */
top:0; /* top left corner should start at topmost spot */
width:100vw; /* take up the full browser width */
z-index:200; /* high z index so other content scrolls underneath */
height:100px; /* define height for content */
}
An element with position:fixed; property doesn't change when the window is scrolled, so a fixed positioned element will stay right.
new Vue({
el: "#app",
data:{
active: false
},
methods: {
toggleNavClass(){
if(this.active == false){
return 'nav'
} else {
return 'sticky-nav'
}
}
},
mounted(){
window.document.onscroll = () => {
let navBar = document.getElementById('nav');
if(window.scrollY > navBar.offsetTop){
this.active = true;
} else {
this.active = false;
}
}
}
})
/*scrollY returns the scroll amount in pixels.
offsetTop is the px difference between the navBar and closest parent element*/body {
margin: 0;
box-sizing: border-box;
}
#app {
color: #2c3e50;
background-color: #ccd6dd;
height: 120vh;
}
a {
font-weight: bold;
color: white;
text-decoration: none;
margin: 0 1vw;
}
a:hover {
transition: linear 100ms;
color: red;
}
/* two classes, decided on scroll */
.nav {
transition: 100ms;
padding: 25px;
}
.sticky-nav{
transition: 100ms;
padding: 20px;
}
#nav {
display: flex;
justify-content: space-between;
width: 100%;
background-color: #55acee;
position: fixed;
top: 0;
}
/* have to add the ID nav (#nav) otherwise the backgrnd color won't change as the previous background color is set in an ID and ID trumps class notation */
#nav.sticky{
transition: 150ms;
box-shadow: 0px 15px 10px -15px #111;
background-color: #ccd6dd;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div id="nav" :class="{sticky:active}">
<div id="nav-container" :class="toggleNavClass()"><a href="#">Menu</a>
</div>
<router-view />
</div>I just built a site using Vue. This is my code
