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="https://www.americangolf.co.uk/on/demandware.static/-/Sites/en_GB/v1714118799354/onlinegolf/fancybox/css/fancybox/jquery.fancybox-buttons.css">

<link rel="stylesheet" href="https://www.americangolf.co.uk/on/demandware.static/-/Sites/en_GB/v1714118799354/onlinegolf/fancybox/css/fancybox/jquery.fancybox-thumbs.css">

<link rel="stylesheet" href="https://www.americangolf.co.uk/on/demandware.static/-/Sites/en_GB/v1714118799354/onlinegolf/fancybox/css/fancybox/jquery.fancybox.css">

<link rel="stylesheet" href="https://www.americangolf.co.uk/on/demandware.static/-/Sites/en_GB/v1714118799354/americangolf/fancybox/css/fancybox/jquery.fancybox.css" />

<script type="text/javascript" src="https://www.americangolf.co.uk/on/demandware.static/-/Sites/en_GB/v1714118799354/americangolf/fancybox/js/fancybox/jquery.fancybox.js"></script>

<script type="text/javascript" src="https://www.americangolf.co.uk/on/demandware.static/-/Sites/en_GB/v1714118799354/americangolf/fancybox/js/fancybox/jquery.fancybox.pack.js"></script>

<script src="https://www.americangolf.co.uk/on/demandware.static/-/Sites/en_GB/v1714118799354/onlinegolf/fancybox/js/fancybox/jquery.fancybox.js"></script>

<script src="https://www.americangolf.co.uk/on/demandware.static/-/Sites/en_GB/v1714118799354/onlinegolf/fancybox/js/fancybox/jquery.fancybox-buttons.js"></script>

<script src="https://www.americangolf.co.uk/on/demandware.static/-/Sites/en_GB/v1714118799354/onlinegolf/fancybox/js/fancybox/jquery.fancybox-thumbs.js"></script>

<script src="https://www.americangolf.co.uk/on/demandware.static/-/Sites/en_GB/v1714118799354/onlinegolf/fancybox/js/fancybox/jquery.easing-1.3.pack.js"></script>

<script src="https://www.americangolf.co.uk/on/demandware.static/-/Sites/en_GB/v1714118799354/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');



});

});