2

Trying to get this script to work on this site:

var t = $('#preschool-program').offset().top - 120;

    jQuery(document).scroll(function(){
        if($(this).scrollTop() > t) {   
        $('body.index header').css({"background-color":"rgba(0,0,0,1)"});
    } 
    });         

Scrolling down nearly 1/2way on the screen and the background header should turn opaque instead of staying semi-transparent. So I'm not sure why it's not working. Anyone?

2

There are several errors in your script and CSS, I'm not sure where to begin...

  • You're mixing $ and jQuery in your code. Joomla loads jQuery in noConflict mode, so you're better off using jQuery
  • The variable t cannot be set because it runs before the DOM is ready. Make sure you wait until the DOM is ready:

    jQuery(function(){ 
       var t = jQuery('#preschool-program').offset().top - 120; 
    });
    
  • The second part should look like this:

    jQuery(document).scroll(function(){
        if(jQuery(this).scrollTop() > t) {   
            jQuery('body.index header').css({"background-color":"rgba(0,0,0,1)"});
    } 
    });
    

    That basically works (the style is added to the header element), but the file http://nettra.net/demo-sites/wvg/development/templates/wvgs/css/bootstrap.css sets the background of the header using background: rgba(0,0,0,0.5)!important; at about line #10983, overriding your inline style. If you remove !important, and make the changes above, it should work.

| improve this answer | |
  • 1
    so you're better off using jQuery >> You can also use $ as an alias which is good if you're used to using it >> jQuery(document).scroll(function($){ ;) – Lodder Sep 4 '15 at 1:31
1

Just an addition to @Johanpw's answer.

jQuery has some issues with the !important attribute when using .css() which you're going to have to use as Bootstrap is using it.

Here are 2 alternatives that you can use.


Solution 1:

You can apply your styling using the .style function:

$('body.index header').attr('style', 'background-color: rgba(0,0,0,1) !important');

Solution 2:

You could also add a class using jQuery and target this class using CSS which is much faster than applying the styling through jQuery itself.

jQuery:

$('body.index header').addClass('customBG');

CSS:

.customBG {
    background-color: rgba(0,0,0,1) !important;
}

Full code using solution 1:

jQuery(document).ready(function ($) {

    var t = $('#preschool-program').offset().top - 120;

    $(document).scroll(function () {       
        if ($(this).scrollTop() > 0){ 
            $('body.index header').attr('style', 'background-color: red !important');
        }       
    });

});
| improve this answer | |
  • Isn't it the $ sign need to be replaced with 'jQuery' for better compatibility as @johanpw mentioned earlier ? – webchun Sep 4 '15 at 2:09
  • You see that I have used jQuery(document).ready(function($) {. This means jQuery is the global scope which is what @johanpw mentioned to prevent conflicts, but I have used $ as a local alias which will not cause conflicts as it's locked to only this scope – Lodder Sep 4 '15 at 10:17
  • Yeah, I managed to replace all of the '$' with jQuery, and that seemed to have fixed it. Plus, I had another version of jQuery running (DOH!). – user1813113 Sep 8 '15 at 19:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.