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:
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:
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;
} |
