saulteafarmer/mmalmi.github.io
1
0
Fork 0
mirror of https://github.com/mmalmi/mmalmi.github.io.git synced 2025-06-05 08:52:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Better nav

Browse Source
This commit is contained in:
Martti Malmi 2015-04-29 00:10:03 +03:00
parent 98ae1b7310
commit 9824fe00df
2 changed files with 69 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
index.html
View File

@ -64,7 +64,45 @@
<script type="text/javascript" src="sorcery/instafeed.min.js"></script> <script type="text/javascript" src="sorcery/instafeed.min.js"></script>
<script type="text/javascript" src="sorcery/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="sorcery/jquery-1.11.2.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var contentItems,
prevItem;
function calculateOffsets() {
contentItems = $('section').map(function (i) {
return $(this).offset().top;
}).get();
}
function updateNav() {
if(contentItems)
handleScrollNavigation();
}
$(window).load(function() {
calculateOffsets();
updateNav();
});
function handleScrollNavigation () {
var pageHeight = $(window).height();
var scroll = $(window).scrollTop() + 1,
activeItem;
for (var n = 0; n < contentItems.length && scroll > contentItems[n]; n++);
activeItem = n - 1;
if (activeItem != prevItem) {
$('header li a').removeClass('active');
$('header li a:eq(' + activeItem + ')').addClass('active');
prevItem = activeItem;
}
};
$(document).ready(function() { $(document).ready(function() {
$(window).resize(calculateOffsets);
$(window).resize(updateNav);
updateNav();
var $root = $('html, body'); var $root = $('html, body');
$('a').click(function() { $('a').click(function() {
var href = $.attr(this, 'href'); var href = $.attr(this, 'href');
@ -75,6 +113,20 @@ $(document).ready(function() {
}); });
return false; return false;
}); });
$('header li a').click(function(e) {
$('header li a').removeClass('active');
$(e.target).addClass('active');
});
$(window).scroll(function(){
updateNav();
if ($(this).scrollTop() > 300) {
$('header').addClass('small');
} else {
$('header').removeClass('small');
}
});
}); });
</script> </script>
</head> </head>
@ -82,7 +134,7 @@ $(document).ready(function() {
<header> <header>
<ul> <ul>
<li><a href="#cover"><span class="fa fa-star"></span></a></li> <li><a href="#cover" class="active"><span class="fa fa-star"></span></a></li>
<!--<li><a href="#design">Design</a></li>--> <!--<li><a href="#design">Design</a></li>-->
<li><a href="#photography">Photography</a></li> <li><a href="#photography">Photography</a></li>
<li><a href="#writing">Writing</a></li> <li><a href="#writing">Writing</a></li>
@ -97,9 +149,8 @@ $(document).ready(function() {
<li><a href="https://twitter.com/marttimalmi"><span class="fa fa-twitter"></span></a></li> <li><a href="https://twitter.com/marttimalmi"><span class="fa fa-twitter"></span></a></li>
<li><a href="https://www.facebook.com/mmalmi"><span class="fa fa-facebook"></span></a></li> <li><a href="https://www.facebook.com/mmalmi"><span class="fa fa-facebook"></span></a></li>
<li><a href="https://www.linkedin.com/in/marttimalmi"><span class="fa fa-linkedin"></span></a></li> <li><a href="https://www.linkedin.com/in/marttimalmi"><span class="fa fa-linkedin"></span></a></li>
<li><a href="https://instagram.com/mmalmi"><span class="fa fa-instagram"></span></a></li> <li><a href="https://github.com/mmalmi"><span class="fa fa-github"></span></a></li>
<li><a href="mailto:sirius@iki.fi"><span class="fa fa-at"></span></a></li> <li><a href="mailto:sirius@iki.fi"><span class="fa fa-at"></span></a></li>
<li><a href="https://github.com/mmalmi"><span class="fa fa-github"></span></a></li>
</ul> </ul>
</div> </div>
</div> </div>

19
per.css
View File

@ -20,7 +20,14 @@ header {
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
transition: all 1s ease;
background: rgba(0,0,0,0.5); background: rgba(0,0,0,0.5);
padding: 1em 0;
}
header.small {
background: rgba(0,0,0,1);
padding: 0;
} }
h1 { h1 {
@ -119,9 +126,8 @@ section {
} }
footer { footer {
padding: 150px 20px; padding: 105px 20px;
background: #fff url(illusions/london-skyline.svg) repeat-x center 0; background: #fff url(illusions/london-skyline.svg) repeat-x center -130px;
//background-size: cover;
} }
a { a {
@ -129,7 +135,12 @@ a {
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover, a.active {
color: #C262D3;
}
header a:focus {
outline: none;
color: #C262D3; color: #C262D3;
} }