Archived topic
Custom JavaScript blocking featuers
2 replies · Started by tobymiguel on January 27, 2020
Hello
I made a custom "social share" menu on the left side of the screen using the following JavaScript/jQuery. For some reason it is blocking some features on my site, for example, the sticky header won't work if this variable is defined:
var stickySidebar = jQuery('.float').offset().top-10;
If I comment the above line out, sticky navigation works again.
This is the complete script:
jQuery( document ).ready(function() {
var stickySidebar = jQuery('.float').offset().top-10;
jQuery(window).scroll(function() {
if (jQuery(window).width() > 980) {
if (jQuery(window).scrollTop() > stickySidebar) {
jQuery('.float').addClass('affix');
}
else {
jQuery('.float').removeClass('affix');
}
}
});
jQuery(window).resize(function() {
if (jQuery(window).width() > 980) {
if (jQuery(window).scrollTop() > stickySidebar) {
jQuery('.float').addClass('affix');
}
else {
jQuery('.float').removeClass('affix');
}
} else {
jQuery('.float').removeClass('affix');
}
});
jQuery('.share-button').click(function(event) {
event.preventDefault();
});
jQuery('.player .share-button').click(function() {
jQuery('.player .share').toggleClass('open');
})
});
Any idea to why this is?
Could it be because the .float class is only present on a specific page?
It could be, you may need to define the element, then check for its existence before tweaking the offset.
If you'd like to link me to your site, I may be able to spot the issue.