Scroll on click : ajouter quelques pixels de décallage
mari0n
-
gardiendelanuit Messages postés 1770 Date d'inscription Statut Membre Dernière intervention -
gardiendelanuit Messages postés 1770 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je crée mon site portfolio, tout le contenu n'est que sur une seule page et est organisé en sections. Il y a dans le menu des liens vers les ID des sections.
Je voulais que lorsqu'un internaute clique sur un lien du menu, que le scroll soit délicat et pas d'un seul coup, et aussi que l'ID de la section ne s'ajoute pas dans l'URL.
Pour cela, j'ai trouvé un bout de code qui fonctionne à merveille :
Le problème, c'est que mon menu est en position fixed en haut de l'écran, le contenu passe donc derrière celui-ci.
Ce que je cherche à faire, c'est dire, dans le code ci-dessus : "scroll vers la section sur laquelle l'internaute a cliqué, mais 50 pixels au dessus".
Avez-vous une idée de comment je pourrais faire cela ? :)
Je crée mon site portfolio, tout le contenu n'est que sur une seule page et est organisé en sections. Il y a dans le menu des liens vers les ID des sections.
Je voulais que lorsqu'un internaute clique sur un lien du menu, que le scroll soit délicat et pas d'un seul coup, et aussi que l'ID de la section ne s'ajoute pas dans l'URL.
Pour cela, j'ai trouvé un bout de code qui fonctionne à merveille :
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
Le problème, c'est que mon menu est en position fixed en haut de l'écran, le contenu passe donc derrière celui-ci.
Ce que je cherche à faire, c'est dire, dans le code ci-dessus : "scroll vers la section sur laquelle l'internaute a cliqué, mais 50 pixels au dessus".
Avez-vous une idée de comment je pourrais faire cela ? :)
A voir également:
- Scroll on click : ajouter quelques pixels de décallage
- Scroll lock ✓ - Forum Matériel & Système
- Scroll lock - Forum Windows
- Visual click avis - Forum Vos droits sur internet
- La magie d'un click? - Forum Javascript
- Touche scroll lock ✓ - Forum Excel
Dernière question : est-ce qu'il est possible de faire en sorte que cette réduction de 50 pixels s'applique à tous les liens sauf un ? (exemple : tous les liens sauf #menu)
$(function() { $('a.page-scroll').bind('click', function(event) { var padding = 0; if($(event.target).attr('id') != 'menu') padding = 50; var $anchor = $(this); $('html, body').stop().animate({ scrollTop: $($anchor.attr('href')).offset().top - padding }, 1500, 'easeInOutExpo'); event.preventDefault(); }); });Pas eu le temps de tester, mais c'est dans l'idée!