JS loaded from template won't run inside custom component

Question

I created a module position at my template where I load a custom module which is a menu bar.

with the next script I change its position to fixed if someone scrolls more than 200px so that the bar will always be on top.

jQuery(window).scroll(function(e){ 
  var jQueryel = jQuery('.fixedElement'); 
  var isPositionFixed = (jQueryel.css('position') == 'fixed');
  if (jQuery(this).scrollTop() > 200 && !isPositionFixed){ 
    jQuery('.fixedElement').css({'position': 'fixed', 'top': '0px'}); 
    jQuery('.fixedElement').addClass("bgNormal");

  }
  if (jQuery(this).scrollTop() < 200 && isPositionFixed)
  {
    jQuery('.fixedElement').css({'position': 'absolute', 'top': '0px'}); 
    jQuery('.fixedElement').removeClass("bgNormal");
  } 
});

I added this script inside the head of template. It runs smoothly in every page except of the views of a custom component I made.

Console doesn't output any error and inspecting the source code I can find that the script is loaded correctly. For some reason it just wont run.

jQuery is correctly loaded and I cant think of anything that would affect the view to run the js.

I uploaded another component and I found that it wouldn't run the script either.

Is this a common issue ? Do I have to do something in order to load scripts from template to view ? Or it's a development problem ?

Answer 1

For some custom components I found I had to add a "wrapper" feature to the js in the views to get them to work correctly.

Since you are only having trouble with the script in the custom components section it may be a conflict in the way the component is loading scripts, as opposed to the way Joomla core handles scripts.

<script type="text/javascript">
    (function ($) {
        $(document).ready(function () {
            $(window).scroll(function(e){ 
                var jQueryel = jQuery('.fixedElement'); 
                var isPositionFixed = (jQueryel.css('position') == 'fixed');
                if ($(this).scrollTop() > 200 && !isPositionFixed){ 
                    $('.fixedElement').css({'position': 'fixed', 'top': '0px'}); 
                    $('.fixedElement').addClass("bgNormal");

                }
                if ($(this).scrollTop() < 200 && isPositionFixed)
                {
                    $('.fixedElement').css({'position': 'absolute', 'top': '0px'}); 
                    $('.fixedElement').removeClass("bgNormal");
                } 
            });
        });

    })(jQuery);
</script>

Answer 2

Ok after alot of searching i find out that this was a mainly css issue.

$(window).scroll() wouldn't trigger because the #content div was getting a random rule that wouldn't let it overflow.

So $(window) wouldn't scroll no matter what.

Fixing that, made it work like a charm!