0

Maybe my code is wrong. Could you advise me? I was trying to make smaller header when I scroll the window, like this site, " https://davidwalsh.name/supporting-internet-explorer "

   function yScroll(){

    var headerH = document.getElementsByClassName('headerContainerShadow');
    var menu = document.getElementById('menu');
    var yPos = window.pageYOffset;  
         if(yPos > 150){
        $(headerH).addClass('smaller');
        $('#searchForm').addClass('smaller');
    } else {
        $(headerH).removeClass('smaller');
        $('#searchForm').removeClass('smaller');
    }   

        }
        window.addEventListener("scroll", yScroll);

My css for 'smaller' is below;

#searchForm{    
padding-top:2.5em;
transition:all 0.3s;
}
#searchForm.smaller{
padding-top:1.2em;
padding-bottom:0.5em;
}

It's working in Firefox and Chrome, but not in IE10(my version). How can I fix this problem? How to change this code?

Thanks

phpmyadmin2014
  • 103
  • 1
  • 9
  • 1
    Probably has to do with addEventListener, you'll need to use attachEvent in IE: http://stackoverflow.com/questions/1695376/msie-and-addeventlistener-problem-in-javascript – Goose Mar 11 '16 at 18:30
  • 1
    @Goose: IE9+ supports `addEventListener()`. – Przemek Mar 11 '16 at 18:41
  • 1
    Do you see some errors in JS console in IE dev tools? – xxxmatko Mar 11 '16 at 18:50
  • SEC7118: XMLHttpRequest for https://fonts.googleapis.com/css?family=Roboto required Cross Origin Resource Sharing (CORS). index.php I see above message. What does this mean? – phpmyadmin2014 Mar 11 '16 at 19:12

0 Answers0