<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<link href="//cdn.muicss.com/mui-0.0.3/css/mui.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="style.css" />
</head>
<body id="app">
<header class="header" v-class="sticky: position > 0">
sushicorp
</header>
<p v-show="position > 0">No.1 Enterprise Sushi Corporation</p>
<div class="mui-container container">
<div class="mui-panel">
<h3>First</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, autem, animi, itaque, ipsum dolore quaerat harum voluptate et porro officiis dicta consequatur explicabo numquam quas aliquam aperiam ab error est.
</div>
<div class="mui-panel">
<h3>Second</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, autem, animi, itaque, ipsum dolore quaerat harum voluptate et porro officiis dicta consequatur explicabo numquam quas aliquam aperiam ab error est.
</div>
<div class="mui-panel">
<h3>Third</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, autem, animi, itaque, ipsum dolore quaerat harum voluptate et porro officiis dicta consequatur explicabo numquam quas aliquam aperiam ab error est.
</div>
<div class="mui-panel">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, autem, animi, itaque, ipsum dolore quaerat harum voluptate et porro officiis dicta consequatur explicabo numquam quas aliquam aperiam ab error est.
</div>
<div class="mui-panel">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, autem, animi, itaque, ipsum dolore quaerat harum voluptate et porro officiis dicta consequatur explicabo numquam quas aliquam aperiam ab error est.
</div>
<div class="mui-panel">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, autem, animi, itaque, ipsum dolore quaerat harum voluptate et porro officiis dicta consequatur explicabo numquam quas aliquam aperiam ab error est.
</div>
<div class="mui-panel">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, autem, animi, itaque, ipsum dolore quaerat harum voluptate et porro officiis dicta consequatur explicabo numquam quas aliquam aperiam ab error est.
</div>
<div class="mui-panel">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, autem, animi, itaque, ipsum dolore quaerat harum voluptate et porro officiis dicta consequatur explicabo numquam quas aliquam aperiam ab error est.
</div>
<div class="mui-panel">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, autem, animi, itaque, ipsum dolore quaerat harum voluptate et porro officiis dicta consequatur explicabo numquam quas aliquam aperiam ab error est.
</div>
<div class="mui-panel">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, autem, animi, itaque, ipsum dolore quaerat harum voluptate et porro officiis dicta consequatur explicabo numquam quas aliquam aperiam ab error est.
</div>
<div class="mui-panel">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, autem, animi, itaque, ipsum dolore quaerat harum voluptate et porro officiis dicta consequatur explicabo numquam quas aliquam aperiam ab error est.
</div>
<div class="mui-panel">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, autem, animi, itaque, ipsum dolore quaerat harum voluptate et porro officiis dicta consequatur explicabo numquam quas aliquam aperiam ab error est.
</div>
<div class="mui-panel">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, autem, animi, itaque, ipsum dolore quaerat harum voluptate et porro officiis dicta consequatur explicabo numquam quas aliquam aperiam ab error est.
</div>
<div class="mui-panel">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, autem, animi, itaque, ipsum dolore quaerat harum voluptate et porro officiis dicta consequatur explicabo numquam quas aliquam aperiam ab error est.
</div>
</div>
<div class="toTop" v-if="position > 500" v-on="click: toTop()" v-transition>
Jump To Top
</div>
<script data-require="vue.js@*" data-semver="0.11.5" src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.11.5/vue.min.js"></script>
<script src="script.js"></script>
</body>
</html>
// Code goes here
new Vue({
el: "#app",
data: {
position: 0
},
methods:{
toTop: function(){
//やむなくjQuery
$("html,body").animate({scrollTop:0},"slow");
}
},
ready: function(){
var self = this;
document.onscroll = function(e){
self.position = document.documentElement.scrollTop || document.body.scrollTop;
}
}
});
/* Styles go here */
.small{
font-size: 1rem;
}
.container{
padding-top: 12rem;
}
header{
text-align: center;
position: fixed;
width: 100%;
color: #888;
background: white;
text-shadow: 0px 1px 2px #777;
color: white;
font-size: 5rem;
height: 10rem;
line-height: 10rem;
transition: all 0.3s ease;
background-image: url(http://cdn.backgroundhost.com/backgrounds/subtlepatterns/greyfloral.png);
}
.sticky {
background: rgba(200,200,200, 0.5);
text-align: left;
text-shadow: 0px 1px 2px #777;
color: white;
font-size: 2rem;
padding-left: 10px;
height: 4rem;
line-height: 4rem;
}
.toTop{
position: fixed;
right: 0;
bottom:0;
height: 3rem;
line-height: 3rem;
color: white;
text-align: center;
width: 100px;
cursor: pointer;
transition: all .3s ease;
background: black;
}
.toTop.v-enter, .toTop.v-leave {
height: 0;
padding: 0 10px;
opacity: 0;
}
#アニメーションするヘッダ、トップへ戻るボタンをVueでやる
* トップへスムーススクロールする部分だけはやむなくjQuery使ってます。