IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Ajouter la classe active au scroll


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Lycéen
    Inscrit en
    Novembre 2022
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 21
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Novembre 2022
    Messages : 8
    Par défaut Ajouter la classe active au scroll
    Bonsoir, j'ai un menu de navigation qui contient une classe active et j'aimerai qu'elle s'active lorsque je scroll vers le href concerné.

    Pour l'instant j'ai juste un code qui l'active quand je clique sur un href du menu :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $(document).on("click", ".navbar .nav-links ul li", function () {
      $(this).addClass("active").siblings().removeClass("active");
    });
    Quelqu'un peut-il m'aider, merci.

    Nom : Capture d’écran 2022-11-11 215902.png
Affichages : 229
Taille : 62,0 Ko

  2. #2
    Expert confirmé
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 667
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 667
    Par défaut
    vous pouvez utilisez la méthode suivante pour savoir si une balise est actuellement affichée :
    https://developer.mozilla.org/fr/doc...dingClientRect

  3. #3
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    Ou passer par un plugin JQuery
    https://github.com/morr/jquery.appear
    ou
    http://imakewebthings.com/waypoints/

    Ou bien encore utiliser IntersectionObserver
    https://developer.mozilla.org/en-US/...ectionObserver

    Ou bien encore en js pur
    https://jsfiddle.net/W33YR/411/

    Ou encore
    https://jsfiddle.net/webvitaly/c7nS5/light/

    Bref en cherchant un peu sur le net on trouve des tonnes de possibilités
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

Discussions similaires

  1. OnePage | Ajouter la class active lors du scroll
    Par SeeZix dans le forum jQuery
    Réponses: 3
    Dernier message: 04/06/2019, 18h45
  2. [Firefox] Flash non activé quand scroll firefox
    Par Tchinkatchuk dans le forum Flash
    Réponses: 4
    Dernier message: 18/08/2009, 23h27
  3. ajouter une classe dans un projet
    Par bonbino dans le forum C++Builder
    Réponses: 4
    Dernier message: 23/10/2006, 14h35
  4. Ajouter une class CSS a une nouvelle cellule
    Par Arfigado dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 26/09/2006, 10h08
  5. [debutant] Comment ajouter des .class ?
    Par Slein dans le forum Eclipse Java
    Réponses: 3
    Dernier message: 30/04/2004, 14h30

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo