On my page I have a top nav bar and a sticky nav that is toggled once the user moves past a certain point on the page. I am trying to embed Google Translate onto both the top nav and the sticky nav, but it seems like Google Translate can only be initialized once per page. I have tried the solution found here:
Multiple Instances of Google Translate
but the issue with that is that only the Google Translate embed has functionality only in the top nav, and not the sticky nav, and I need both of them to have a functioning Google Translate embed.
The way I think would be the best way to get this fixed for my situation is that I first:
- On window load attach the Google Translate api script to the top nav element in a function
- In new function, check that the user scrolls past a certain point of the page by using $(window).scrollTop() and then terminate the first function at that point.
- Do the same as step two but reversed for when the user scrolls up past a certain point.
This is what im working with right now:
https://jsfiddle.net/jgg7ffwc/
Please keep in mind that only this function works right now but the rest of the functions fail when trying to terminate the first function:
$(window).load(function initializeGT() {
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'es', layout: google.translate.TranslateElement.InlineLayout.SIMPLE},'gls-element');
});
Any guidance would be very helpful, thank you.
