Floating movie navigation
This commit is contained in:
1 parent
3face06baf
commit
a5cc1859d1
3 files changed
+29
-6
No files matched your search
@@ -141,6 +141,16 @@ var MovieList = new Class({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
self.nav_scrollspy = new ScrollSpy({
|
||||||
|
min: 10,
|
||||||
|
onEnter: function(){
|
||||||
|
self.navigation.addClass('float')
|
||||||
|
},
|
||||||
|
onLeave: function(){
|
||||||
|
self.navigation.removeClass('float')
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
reset: function(){
|
reset: function(){
|
||||||
@@ -211,8 +221,8 @@ var MovieList = new Class({
|
|||||||
|
|
||||||
loadMore: function(){
|
loadMore: function(){
|
||||||
var self = this;
|
var self = this;
|
||||||
|
if(self.offset >= self.options.limit)
|
||||||
self.getMovies()
|
self.getMovies()
|
||||||
},
|
},
|
||||||
|
|
||||||
store: function(movies){
|
store: function(movies){
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
.movies {
|
.movies {
|
||||||
padding: 20px 0;
|
padding: 50px 0 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.movies .movie {
|
.movies .movie {
|
||||||
@@ -215,7 +215,20 @@
|
|||||||
|
|
||||||
.movies .alph_nav {
|
.movies .alph_nav {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
transition: box-shadow .4s linear;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 2;
|
||||||
|
top: 0;
|
||||||
|
padding: 100px 7px 7px;
|
||||||
|
margin: -7px;
|
||||||
|
width: 960px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.movies .alph_nav.float {
|
||||||
|
box-shadow: 0 0 10px rgba(0,0,0,0.4);
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #4e5969;
|
||||||
|
}
|
||||||
|
|
||||||
.movies .alph_nav ul {
|
.movies .alph_nav ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
|||||||
@@ -153,12 +153,12 @@ body > .spinner, .mask{
|
|||||||
height: 60px;
|
height: 60px;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 99%;
|
width: 99%;
|
||||||
z-index: 2;
|
z-index: 5;
|
||||||
box-shadow: 0 0 5px rgba(0,0,0,0.1);
|
box-shadow: 0 0 5px rgba(0,0,0,0.05);
|
||||||
transition: box-shadow .4s cubic-bezier(0.9,0,0.1,1);
|
transition: box-shadow .4s cubic-bezier(0.9,0,0.1,1);
|
||||||
}
|
}
|
||||||
.header.with_shadow {
|
.header.with_shadow {
|
||||||
box-shadow: 0 0 50px rgba(0,0,0,0.3);
|
box-shadow: 0 0 20px rgba(0,0,0,0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header > div {
|
.header > div {
|
||||||
|
|||||||
Reference in new issue
Block a user