[Support request] Custom JavaScript blocking featuers

[tobymiguel]

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?

[tobymiguel]

Could it be because the .float class is only present on a specific page?

[Tom]

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.

[Author]

Posts