1

how to add class into div using on scroll in magento.

i have javascript like this

var $j = jQuery.noConflict();
$j(window).scroll(function() {    
    var scroll = $j(window).scrollTop();

    if (scroll >= 100) {
        $j(".page-header").addClass("header-bar");
    } else {
        $j(".page-header").removeClass("header-bar");
    }
});

that javascript will add or remove header-bar class from div with page-header class in it. it look like this <header id="header" class="page-header"> will become <header id="header" class="page-header header-bar">if i scroll down the page.

I tried using single html file, it is working perfectly, but then when i apply it in magento, it is not working, but no error message displayed.

The way i apply it into magento is like this:

First, i put that javascript into one file named header-effect.js and i store the file in skin\frontend\rwd\default\jsfolder. After that, i add header-effect.js in page.xml <action method="addItem"><type>skin_js</type><name>js/header_effect.js</name></action>

I clear magento cache, refresh the page, scroll down the page but nothing is happen, i check page source and header-effect.js is loaded.

Am i doing it correctly?

1

For common Jquery errors, check if following steps are carried out:

  1. Have you checked the console of your browser for any errors that might have occured.

  2. Magento does not include jquery by default. Have you included it?

  3. Magento requires jquery.noconflict script to be added at the end of the jquery scripts. This stops the conflict between jquery and magento's default prototype.

  4. After including jquery.noconflict, I recommend not using the "$" sign for accessing jquery variables. Try using jQuery instead of $ everywhere.

  • hi,thank you for the answer. i add this line of code <action method="addItem"><type>skin_js</type><name>js/header_effect.js</name></action> into page.xml and i already put jquery.noCOnflict() and not using $, but still not working, no error in console. – Orochi Jun 4 '14 at 7:16
  • are there any errors in the console? – Rojan Shrestha Jun 4 '14 at 9:24
  • no errors in console :( – Orochi Jun 4 '14 at 9:25
  • are you sure the scroll event is working?? – Rojan Shrestha Jun 4 '14 at 9:30
  • hi Rojan, finally manage to fix it, i paste the wrong script into my js, silly mistake :(. I really appreciate your help Rojan. – Orochi Jun 4 '14 at 9:45

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.