That was done by a javascript trigger.
This script adds a style (.fixed) to the nav-div as soon as a monitored (and in this case empty with the id ‘nav-trigger’) div reaches the top of the screen:
function sticky_relocate()
{
var window_top = $(window).scrollTop();
var div_top = $('#nav-trigger').offset().top;
if (window_top > div_top)
{
$('#nav-container').addClass('fixed');
} else
{
$('#nav-container').removeClass('fixed');
}
}
$(function ()
{
$(window).scroll(sticky_relocate);
sticky_relocate();
});
The style .fixed has a different background-color and text-color defined, and the changes are ‘animated’ in css:
#nav-container-mobile.fixed {
color: #fff;
top: 0px;
z-index: 1000;
background-color: rgba(204,0,106,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
height: auto;
width: 100%;
transition: background-color 1s;
-webkit-transition: background-color 1s;
position: fixed
}
#nav-container-mobile.fixed a, #nav-container-mobile.fixed a:link, #nav-container-mobile.fixed a:visited {
color: #fff
}
#nav-container-mobile.fixed a:hover {
color: #cc006a
}
#nav-container.fixed {
color: #fff;
position: fixed;
z-index: 1000;
background-color: rgba(204,0,106,0.95);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
height: auto;
width: 100%;
transition: background-color 1s;
-webkit-transition: background-color 1s;
top: 0px
}
#nav-container.fixed > div {
background-image: url(“…/Resources/logo-ontwerpzaam-navbar.png”);
background-repeat: no-repeat;
background-position: 0 50%;
background-size: contain;
transition: background 1s;
-webkit-transition: background 1s
}
#nav-container.fixed > div .fwNavItem .sub .fwNavItem a {
background-color: rgba(204,0,106,0.9) !important;
transition: background-color .5s;
-webkit-transition: background-color .5s
}
#nav-container.fixed > div .fwNavItem .sub .fwNavItem a:hover, #nav-container.fixed > div .fwNavItem .sub .fwNavItem a:focus {
background-color: rgba(0,0,0,0.75) !important;
transition: background-color .5s;
-webkit-transition: background-color .5s
}
#nav-container.fixed a, #nav-container.fixed a:link, #nav-container.fixed a:visited {
color: #fff !important
}
#nav-container.fixed a:hover {
background-color: rgba(204,0,106,0.95);
transition: background-color .5s;
-webkit-transition: background-color .5s
}
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options