jquery aux médias d'appui valeur largeur interrogation de div (et pas ma valeur normale css) et l'utiliser dans une fonction

Question

J'ai une fonction jquery qui change une image en fonction de la position de défilement. Cela fonctionne bien quand je me sers de mon stylesheet normal, mais quand mes requêtes médias entrent en jeu et les valeurs d'origine changent ma fonction jquery au lieu d'obtenir la valeur des médias il fonctionne toujours sur la valeur d'origine dans la feuille de style. Est-il possible de définir si jquery sera CARAB la valeur réelle qui est actuellement utilisé?

Ceci est la fonction jquery:

var scpos = function(){
  $(window).scroll(function(){
    var wwidth = $(window).width();
    var spos1 = wwidth - 371;
    var spos2 = spos1+wwidth;
    var spos3 = spos2 + wwidth;
    var spos4 = spos3 + wwidth + $('.rightporto').width();
    var spos5 = spos4 + wwidth + $('.leftclients').width();

     if(($(window).scrollLeft() >= 0)&& ($(window).scrollLeft() <= spos1)){
                  $(".step").css('background','url(img/naboutus.png) 94% 5% no-repeat fixed');
              } else if(($(window).scrollLeft() > spos1)&& ($(window).scrollLeft() <= spos2)){
                  $(".step").css('background','url(img/nwhatwedo.png) 94% 5% no-repeat fixed');
              } else if(($(window).scrollLeft() > spos2 )&& ($(window).scrollLeft() <= spos3)){
                  $(".step").css('background','url(img/ntheory.png) 94% 5% no-repeat fixed');
              } else if(($(window).scrollLeft() > spos3)&& ($(window).scrollLeft() <= spos4)){
                  $(".step").css('background','url(img/nportfolio.png) 94% 5% no-repeat fixed');
              } else if(($(window).scrollLeft() > spos4)&& ($(window).scrollLeft() <= spos5)){
                  $(".step").css('background','url(img/nclients.png) 94% 5% no-repeat fixed');
              }else {
                  $(".step").css('background','url(img/ncontacts.png) 94% 5% no-repeat fixed');
              }



        });

C'est là que je l'appelle

$(window).resize(function() {
scpos();
})
.resize();//trigger the resize event on page load

Ma principale valeur stylesheet pour la classe rightporto:

.rightporto{
     float:left;
 width:2484px;
}

Et voici ma valeur des médias pour la classe rightporto selon la résolution, par exemple 1366px largeur:

@media screen and (min-width: 1281px) and (max-width: 1366px) {
          .rightporto{width:2000px;}
     }

Donc mon problème que vous pouvez voir est que la fonction jquery saisit que la classe rightporto largeur dans ma feuille de style principale qui est la largeur: 2484px. Alors, quand j'ai une résolution de 1366 largeur au lieu d'obtenir la classe rightporto largeur: 2000px il obtient toujours la principale de 2484px;

Toutes les suggestions?

Answer 1

CSS3 « requêtes des médias » ne sont pas encore mis en œuvre dans tous les principaux navigateurs. Est-il possible que la directive #rightporto { width:2000px; } n'est pas mis en œuvre?