Sticky Top Nav
Example: https://www.americangolf.co.uk/galvin-green-home/Galvin-Green-Home.html
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');
}
});
Simple Fancy Box
Example: https://www.americangolf.co.uk/fancybox-demo/FancyBox-Demo.html
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/v1715069695257/onlinegolf/fancybox/css/fancybox/jquery.fancybox-buttons.css">
<link rel="stylesheet" href="https://www.americangolf.co.uk/on/demandware.static/-/Sites/en_GB/v1715069695257/onlinegolf/fancybox/css/fancybox/jquery.fancybox-thumbs.css">
<link rel="stylesheet" href="https://www.americangolf.co.uk/on/demandware.static/-/Sites/en_GB/v1715069695257/onlinegolf/fancybox/css/fancybox/jquery.fancybox.css">
<link rel="stylesheet" href="https://www.americangolf.co.uk/on/demandware.static/-/Sites/en_GB/v1715069695257/americangolf/fancybox/css/fancybox/jquery.fancybox.css" />
<script type="text/javascript" src="https://www.americangolf.co.uk/on/demandware.static/-/Sites/en_GB/v1715069695257/americangolf/fancybox/js/fancybox/jquery.fancybox.js"></script>
<script type="text/javascript" src="https://www.americangolf.co.uk/on/demandware.static/-/Sites/en_GB/v1715069695257/americangolf/fancybox/js/fancybox/jquery.fancybox.pack.js"></script>
<script src="https://www.americangolf.co.uk/on/demandware.static/-/Sites/en_GB/v1715069695257/onlinegolf/fancybox/js/fancybox/jquery.fancybox.js"></script>
<script src="https://www.americangolf.co.uk/on/demandware.static/-/Sites/en_GB/v1715069695257/onlinegolf/fancybox/js/fancybox/jquery.fancybox-buttons.js"></script>
<script src="https://www.americangolf.co.uk/on/demandware.static/-/Sites/en_GB/v1715069695257/onlinegolf/fancybox/js/fancybox/jquery.fancybox-thumbs.js"></script>
<script src="https://www.americangolf.co.uk/on/demandware.static/-/Sites/en_GB/v1715069695257/onlinegolf/fancybox/js/fancybox/jquery.easing-1.3.pack.js"></script>
<script src="https://www.americangolf.co.uk/on/demandware.static/-/Sites/en_GB/v1715069695257/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&autoplay=1&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'
});
});
JQUERY hover
Example: https://www.americangolf.co.uk/image-hover-with-jquery-2/Image-Hover-with-JQuery-2.html
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');
});
});