As I delve into enhancing my website, I've made the choice to incorporate jquery, despite my lack of proficiency in Javascript. However, I've hit a roadblock when attempting to execute the stickyNavbar function on either the navigation wrapper, nav tag, or ul tag. Below is the snippet of code that's causing me some confusion:
$(function () {
$('.header').stickyNavbar({
activeClass: "active", // Class to be added to highlight nav elements
sectionSelector: "scrollto", // Class of the section that is interconnected with nav links
animDuration: 250, // Duration of jQuery animation
startAt: 0, // Stick the menu at XXXpx from the top of the this() (nav container)
easing: "linear", // Easing type if jqueryEffects = true, use jQuery Easing plugin to extend easing types - gsgd.co.uk/sandbox/jquery/easing
animateCSS: true, // AnimateCSS effect on/off
animateCSSRepeat: false, // Repeat animation everytime user scrolls
cssAnimation: "fadeInDown", // AnimateCSS class that will be added to selector
jqueryEffects: false, // jQuery animation on/off
jqueryAnim: "slideDown", // jQuery animation type: fadeIn, show or slideDown
selector: "a", // Selector to which activeClass will be added, either "a" or "li"
mobile: false, // If false nav will not stick under 480px width of window
mobileWidth: 480, // The viewport width (without scrollbar) under which stickyNavbar will not be applied (due usability on mobile devices)
zindex: 9999, // The zindex value to apply to the element: default 9999, other option is "auto"
stickyModeClass: "sticky", // Class that will be applied to 'this' in sticky mode
unstickyModeClass: "unsticky" // Class that will be applied to 'this' in non-sticky mode
});
});<!DOCTYPE html>
<html>
<head>
<title>Sunny Bistro</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.0.0/animate.min.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="CSS/Base%20CSS.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="//cdn.jsdelivr.net/stickynavbar.js/1.3.4/jquery.stickyNavbar.min.js"></script>
<script>var _nearplace=_nearplace||{};_nearplace.organization='0615ec61-9279-49ee-9d05-b021594eef39';_nearplace.widget='d2b48791-d4a8-439c-8a2f-c59d214275a3';window.nearplace||function(){var s=document.createElement('script');s.type='text/javascript';s.async=!0;s.src='https://widget.nearplace.com/loader.js';document.addEventListener("DOMContentLoaded",function(){(document.scripts[0]||document.head).appendChild(s)})}();</script>
<div id="header" class="header">
<nav id="nav">
<ul class="nav navbar-nav">
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#services">Services</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</nav>
</div>
<section id="bottle">
<article>
<h6><img src="CSS/Images/SunnyBistro-8.png" ></h6>
<h1>The Sunny Bistro</h1>
<h2>The sunny bistro</h2>
</article>
<div class="parallax" data-velocity="-.3"></div>
</section>
<section id="story-freext">
<article>
</article>
<div class="parallax" data-velocity="-.1"></div>
<div class="parallax" data-velocity="-.5" data-fit="525"></div>
</section>
<section></section>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="../jquery.scrolly.js"></script>
<script>
$(document).ready(function(){
$('.parallax').scrolly({bgParallax: true});
});
</script>
</body>
</html>