Here is the scenario: I have 2 sets of navigation, main and secondary. The main navigation will always exist on a page and the secondary nav will not always be present. On the pages that DO contain the secondary nav, I want the main navigation to do something on mouseenter and mouseleave only when a class of "affix" has been attached to the secondary nav (after the page has been scrolled down to a certain point, but that is a separate piece of code).
The code I currently have is as follows:
var navItem = $('.main-navigation');
var stickyNav = $('.tabbed-sticky-nav.affix');
if (stickyNav == null || stickyNav == 'undefined') {
doNothing();
return;
} else {
navItem.mouseenter(function() {
console.log("Hover");
});
navItem.mouseleave(function() {
console.log("Out");
});
}
function doNothing() {
console.log("Object not found");
}
When I run this as it is, the nav items always fire the code whether or not the subnav is on the page. I should probably be first checking if .tabbed-sticky-nav exists on the page, that way if the page doesn't have the secondary nav then don't bother checking for anything on hover. However, if the .tabbed-sticky-nav DOES exist and has the class of "affix" added to it, only then do I want the hover actions of the main nav to potentially apply. How can I change things so this cleanly checks and executes for these circumstances?