Bonsoir, petit prob sur une fonction Jquery

J'ai fais disparaitre ma barre latéral de navigation comme ceux ci :

::-webkit-scrollbar{display:none;}

Maintenant je voudrais la faire réapparaitre seulement lorsque je scroll mon site , du coup j'ai fais appel a du Jquery !!!!
et j'ai composé une fonction qui a l'air de marcher sur l'éditeur et sur le site par contre rien ne se passe quand je scroll

$(window).scroll(function(){
       if($("::-webkit-scrollbar").css('display','none'))
       {
       $("::-webkit-scrollbar").css('display','')
       }else{
       $("::-webkit-scrollbar").css('display','none')
       }
   });

alors j'ai test aussi avec removeattribute à la place du css display

$("::-webkit-scrollbar").removeAttr('display');

Mais ca fonctionne toujours pas aussi !

Ca doit se faire de faire disparaitre sa nav latéral du navigateur et la faire réapparaitre seulement lorsque je scroll pourtant: Bref je pensais que j'étais assez doué pour composer ma fonction tout seul ; Preuve que non

mika931 a écrit :
J'ai fais disparaitre ma barre latéral de navigation comme ceux ci :

::-webkit-scrollbar{display:none;}

Maintenant je voudrais la faire réapparaitre seulement lorsque je scroll mon site , du coup j'ai fais appel a du Jquery !!!!
et j'ai composé une fonction qui a l'air de marcher sur l'éditeur et sur le site par contre rien ne se passe quand je scroll

$(window).scroll(function(){
       if($("::-webkit-scrollbar").css('display','none'))
       {
       $("::-webkit-scrollbar").css('display','')
       }else{
       $("::-webkit-scrollbar").css('display','none')
       }
   });

alors j'ai test aussi avec removeattribute à la place du css display

$("::-webkit-scrollbar").removeAttr('display');

Mais ca fonctionne toujours pas aussi !

Ca doit se faire de faire disparaitre sa nav latéral du navigateur et la faire réapparaitre seulement lorsque je scroll pourtant: Bref je pensais que j'étais assez doué pour composer ma fonction tout seul ; Preuve que non

$(window).scroll(function(){
        var scroll = $(this).scroll();
        if(scroll != 0)
        {
        $("::-webkit-scrollbar").removeAttr('display');
        }else{
        $("::-webkit-scrollbar").css('display','none');
        }
    });

J'ai test ça aussi en posant une variable, mais toujours pas ...

Bonjour. En préambule, je ne comprends pas à quoi peut correspondre un pseudo élément ::-webkit-scrollbar, mis à part peut-être pour un navigateur webkit... Pourquoi ne pas cibler l'élément dans une classe conventionnelle ?

Sinon, ma solution en jQuery :

(function($) {
	var menu = $('.menu'); // En admettant que l'élément comporte la classe .menu
	// Apparition de la flèche 'retour en haut' au scroll de la page
	$(window).scroll(function() {
		if ($(this).scrollTop() > 100) { // Vous pouvez régler la valeur
			menu.fadeIn();
		} else {
			menu.fadeOut();
		}
	});
})(jQuery);

Exemple ici (non pas avec un menu mais avec l'apparition d'une flèche "retour en haut", c'est le même principe) : Scroll Top
Modifié par Olivier C (26 Feb 2016 - 08:49)

Bonjour,

Un peu comme Olivier, je n'utiliserais pas ::-webkit-scrollbar, cela ne fonctionnerait que sur Chrome&Co et il est très mal géré quand on essaie de le trafiquer en JS, voici ma solution (avec l'utilisation du plugin jquery-mousewheel)

Alors ca marche, seulement lorsque mon scroll apparait et désapparait ca décale tout mes éléments.
Du coup visuellement et graphiquement ca le fait pas trop....

Adma931 a écrit :
Alors ca marche, seulement lorsque mon scroll apparait et désapparait ca décale tout mes éléments.
Du coup visuellement et graphiquement ca le fait pas trop....

C'est toujours moi mika931
juste j'ai un compte en trop qui me sert a rien d'ailleurs.