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 :

Appliquer une règle css selon la position sur l'écran


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Juin 2011
    Messages
    211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Juin 2011
    Messages : 211
    Par défaut Appliquer une règle css selon la position sur l'écran
    Bonjour,

    Je souhaite appliquer un style css sur mon menu quand je survole mes sections et ce que je fais fonctionne lorsque je me déplace dans mes sections avec la molette de ma souris (même si je m'y prends mal) mais ce que je souhaite, c'est faire en sorte que cela fonctionne aussi bien en se déplaçant avec la barre de défilement.
    Je vous remercie de me mettre sur la voie.

    Mon jquery:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    (function($){
    	$(document).ready(function() {
    		$('#top-menu li.current-menu-item').first().addClass('active');
    		$('#top-menu li').removeClass('active'); 
    		$('#top-menu li a').click(function() {
    			$('#top-menu li').removeClass('active');
    			$(this).parent().addClass('active');
    		});
    	});
    })(jQuery);
     
    (function($){
    	$(document).ready(function(){
    		$('#methodologie').hover( function(event){
    			// console.log('hover, event : :'+event.type);
    			$('body #menu-item-28661 a').toggleClass('link-active');
    		});
    		$('#prestations').hover( function(event){
    			// console.log('hover, event : :'+event.type);
    			$('body #menu-item-28665 a').toggleClass('link-active');
    		});
    		$('#contact').hover( function(event){
    			// console.log('hover, event : :'+event.type);
    			$('body #menu-item-28666 a').toggleClass('link-active');
    		});
    	});
    })(jQuery);
    Mon css:
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
            #top-menu .active a{
    		color: #ff3036 !important;
    	}
     
    	.link-active {
    		color: #fff !important;
    		background: #ff3036 !important;
    		border:1px solid #ff3036 !important;
    		border-radius: 5px !important;
    		padding: 7px 7px 7px 7px !important;
    		margin-top:-7px !important;
    	}

  2. #2
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 100
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 100
    Par défaut
    En théorie il y a IntersectionObserver, mais je n’ai jamais testé, et il n’y a pas d’exemple de code dans la doc. Je te laisse essayer
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  3. #3
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    Si j'ai bien compris, tu as un site "one page"...

    "one page change menu active"


  4. #4
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Juin 2011
    Messages
    211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Juin 2011
    Messages : 211
    Par défaut
    Merci pour cet exemple.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Affectation d'une règle CSS externe avec javascript
    Par DexterV dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 08/04/2010, 17h46
  2. Appliquer une règle par script
    Par levit dans le forum Windows XP
    Réponses: 1
    Dernier message: 15/10/2009, 08h45
  3. Réponses: 1
    Dernier message: 31/05/2009, 18h23
  4. Appliquer une méthode d'Euler en 3D sur une EDP?
    Par Sebsheep dans le forum Mathématiques
    Réponses: 6
    Dernier message: 25/12/2007, 20h56

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