J'ai un scrollTo script de lien d'ancrage sur mon site Web avec un décalage de -35 px car ma barre de navigation mesure 35 px de hauteur. Parfois, sur différentes résolutions (smartphone ou tablette), je dois modifier la valeur de décalage. Comment puis-je faire cela dans ce script?

$(document).ready(function() {
    $('.scrollTo').click( function() { // Au clic sur un élément
        var page = $(this).attr('href') ; // Page cible
        var speed = 300; // Durée de l'animation (en ms)
        $('html, body').animate( { scrollTop: $(page).offset().top - 35 }, speed ); // Go
        return false;
    });
});
0
Orko 7 mars 2016 à 16:44

4 réponses

Meilleure réponse

La solution générale la plus simple consiste à baser votre décalage sur la hauteur de la barre de navigation:

$('.scrollTo').click( function() { // Au clic sur un élément
    var page = $(this).attr('href') ; // Page cible
    var speed = 300; // Durée de l'animation (en ms)
    var height = $(...nav bar selector...).height();
    $('html, body').animate( { scrollTop: $(page).offset().top - height }, speed ); // Go
    //                                                           ^^^^^^
    return false;
});

Mais si vous devez ajuster votre JS en fonction des requêtes des médias, vous devez utiliser matchMedia:

if (matchMedia('(min-width: 768px)').matches) {
    ...larger screens...
} else {
    ...smaller screens...
}

Cela présente l'avantage de correspondre exactement aux requêtes multimédias utilisées en CSS. Si vous appelez $(window).width(), il peut ne pas correspondre exactement aux requêtes multimédias selon qu'une barre de défilement est affichée pour certains navigateurs.

2
zzzzBov 7 mars 2016 à 13:53

Merci à tous pour vos réponses!

Pour ceux qui ont besoin de savoir, voici la réponse:

Blockquote

La solution générale la plus simple est de baser votre décalage sur la hauteur de la barre de navigation:

$('.scrollTo').click( function() { // Au clic sur un élément
var page = $(this).attr('href') ; // Page cible
var speed = 300; // Durée de l'animation (en ms)
var height = $(...nav bar selector...).height();
$('html, body').animate( { scrollTop: $(page).offset().top - height },  speed ); // Go
                                                             ^^^^^^
return false;
});

Mais si vous devez ajuster votre JS en fonction des requêtes multimédias, vous devez utiliser matchMedia:

if (matchMedia('(min-width: 768px)').matches) {
...larger screens...
} else {
...smaller screens...
}

Cela présente l'avantage de correspondre exactement aux requêtes multimédias utilisées en CSS. Si vous appelez $ (window) .width (), il peut ne pas correspondre exactement aux requêtes multimédias selon qu'une barre de défilement est affichée pour certains navigateurs.

0
Orko 7 mars 2016 à 14:02

Vous pouvez utiliser ce qui suit pour tester une largeur spécifique sur votre élément de fenêtre.

if($(window).width() > x) {
  // Do something.
} else {
  // Do something else. 
}

Vous pouvez l'utiliser à l'intérieur de votre rappel de clic pour vérifier l'état de la fenêtre à ce moment.

Dans votre code, cela pourrait être:

$(document).ready(function() {
  $('.scrollTo').click( function() { // Au clic sur un élément
    var page = $(this).attr('href') ; // Page cible
    var speed = 300; // Durée de l'animation (en ms)

    var topOffset = 35;
    if($(window).width() > 350)
    {
      topOffset = 20;
    }
    $('html, body').animate( { scrollTop: $(page).offset().top - 35 }, speed ); // Go
    return false;
  });
});
0
groooves 7 mars 2016 à 13:53

Vous pouvez simplement lire les différentes solutions, mais peut-être qu'avec une requête média / css, c'est plus simple. Pour obtenir la résolution d'écran dans JS, utilisez l'objet écran:

screen.width;
screen.height;

Vous pouvez donc vérifier la hauteur et faire les différentes choses.

0
Kordi 7 mars 2016 à 13:47