CSS

/* This CSS sticks the Nav at the top*/
.posi {
position:fixed;
margin-top: 0;
top:0;
}
/* This is your nav CSS, style as you would */
#nav-wrapper {
height: 105px;
background-color:#000;
min-width: 935px;
width: 100%;
z-index:100;
list-style:none;
border-bottom: 5px solid #6B6B6b;
}

HTML

<!-- Add you DIVS accordingly making sure it is wrapped around nav-wrapper -->
<div id="nav-wrapper">
</div>

Script

// This script adds the CSS .posi to the #nav-wrapper once the user scrolls past the nav
$(window).scroll(function () {
if( $(window).scrollTop() > $('#nav-wrapper').offset().top && !($('#nav-wrapper').hasClass('posi'))){
$('#nav-wrapper').addClass('posi');
// The nav will return to the top of the page once the user has reached it
} else if ($(window).scrollTop() == 0){
$('#nav-wrapper').removeClass('posi');
}
});

Import Libraries

<!-- Add these libraries to activate the fancy box JS and styles -->
<link rel="stylesheet" href="http://demandware.edgesuite.net/aaky_prd/on/demandware.static/-/Sites/en_GB/v1480953785701/onlinegolf/fancybox/css/fancybox/jquery.fancybox-buttons.css">
<link rel="stylesheet" href="http://demandware.edgesuite.net/aaky_prd/on/demandware.static/-/Sites/en_GB/v1480953785701/onlinegolf/fancybox/css/fancybox/jquery.fancybox-thumbs.css">
<link rel="stylesheet" href="http://demandware.edgesuite.net/aaky_prd/on/demandware.static/-/Sites/en_GB/v1480953785701/onlinegolf/fancybox/css/fancybox/jquery.fancybox.css">
<link rel="stylesheet" href="http://demandware.edgesuite.net/aaky_prd/on/demandware.static/-/Sites/en_GB/v1480953785701/americangolf/fancybox/css/fancybox/jquery.fancybox.css" />
<script type="text/javascript" src="http://demandware.edgesuite.net/aaky_prd/on/demandware.static/-/Sites/en_GB/v1480953785701/americangolf/fancybox/js/fancybox/jquery.fancybox.js"></script>
<script type="text/javascript" src="http://demandware.edgesuite.net/aaky_prd/on/demandware.static/-/Sites/en_GB/v1480953785701/americangolf/fancybox/js/fancybox/jquery.fancybox.pack.js"></script>
<script src="http://demandware.edgesuite.net/aaky_prd/on/demandware.static/-/Sites/en_GB/v1480953785701/onlinegolf/fancybox/js/fancybox/jquery.fancybox.js"></script>
<script src="http://demandware.edgesuite.net/aaky_prd/on/demandware.static/-/Sites/en_GB/v1480953785701/onlinegolf/fancybox/js/fancybox/jquery.fancybox-buttons.js"></script>
<script src="http://demandware.edgesuite.net/aaky_prd/on/demandware.static/-/Sites/en_GB/v1480953785701/onlinegolf/fancybox/js/fancybox/jquery.fancybox-thumbs.js"></script>
<script src="http://demandware.edgesuite.net/aaky_prd/on/demandware.static/-/Sites/en_GB/v1480953785701/onlinegolf/fancybox/js/fancybox/jquery.easing-1.3.pack.js"></script>
<script src="http://demandware.edgesuite.net/aaky_prd/on/demandware.static/-/Sites/en_GB/v1480953785701/onlinegolf/fancybox/js/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>

CSS

/* This is your style for the call to action element */
#banner-wrapper {
background-image:url(www.example.co.uk);
width:935px;
height:324px;
}

HTML

<!-- The "a" tag is wrapped around the element that the user will click-->

<a class="various fancybox.iframe" title="Motocaddy M3 Pro" width="640" controls="0" showinfo="0" href="//www.youtube.com/v/lEo7CWWDtMU?fs=1&amp;autoplay=1&amp;rel=0">
<div id="banner-wrapper">
</div>

</a>

Script

// This is the animation parameters for the fancy box
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 700,
maxHeight : 700,
fitToView : false,
width : 600,
height : 400,
autoSize : false,
closeClick : false,
openEffect : 'elastic',
closeEffect : 'none',
'scrolling' : 'no'
});
});

Script

$(document).ready(function() {
$('.element').animate({
opacity: 1
});
// will change opacity to 1 on hover and back to .5 when not
$('.element').hover(function() {
$(this).stop().animate({
opacity: .5
}, 'slow');
}, function() {
$(this).stop().animate({
opacity: 1
}, 'fast');

});
});