Menu sscenseur à boutons dans une page unique [Résolu]

Signaler
-
 legaub -
Bonjour,

je ne viens pas souvent ici, aussi, merci de bien vouloir m'excuser si je ne poste pas au bon endroit, ou si ma question est inadéquate.

Je viens de passer mon weekend pluvieux à essayer de reproduire le petit menu vertical blanc et bleu que l'on trouve à gauche de cette page : http://www.mozilla.org/fr/firefox/partners/

La difficulté que je rencontre est de changer l'aspect du bouton/menu selon la position dans la page.

Bref, merci de votre aide et de toute piste de recherche.

4 réponses

Messages postés
1757
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 mai 2020
76
bonjour

il faut utiliser scrollTop

un exemple simplifié
<!DOCTYPE html>

<title>source javascript</title>
<head>
<link rel="icon" type="image/ico" href="icc.ico" />

<script type="text/javascript">

function marchar(){

var elem=document.getElementById('cssmenu').getElementsByTagName('li')

for (var i=0;i<elem.length;i++)

if(elem[i].style.backgroundColor='red'){

elem[i].style.backgroundColor='white'

}

var hauteur_scroll=document.documentElement.scrollTop || document.body.scrollTop

if(hauteur_scroll>=0 && hauteur_scroll<=400){
var men=0
}
if(hauteur_scroll>=400 && hauteur_scroll<=800){
var men=1
}
if(hauteur_scroll>=800 && hauteur_scroll<=1200){
var men=2
}
if(hauteur_scroll>=1200 && hauteur_scroll<=1600){
var men=3
}
if(hauteur_scroll>=1600 && hauteur_scroll<=2000){
var men=4
}

elem[men].style.backgroundColor='red'

}



if(typeof window.addEventListener == 'undefined'){


document.attachEvent("onscroll",marchar);
}
else{
document.addEventListener("scroll",marchar, false);
}

</script>

</head>




     
      
        <li>javascript fr</li>
        <li>javascript fr</li>
<li>javascript fr</li>
<li>javascript fr</li>
<li>javascript fr</li>
      
   















</html>
Bonjour,

merci de ta réponse.

Je suis toujours, enthousiaste et admiratif chaque fois que je rencontre / trouve sur le net des personnes compétentes, disponibles et qui partagent leurs connaissances. Merci beaucoup donc.

Si je comprends bien ton code, les limites de hauteurs de Scroll sont fixées à des multiples de 400 px. N'y a-t-il pas moyen de l'exprimer en pourcentage ?

Car j'ai choisi des div entre lesquelles on se balade, de la hauteur de la fenêtre du navigateur. D'ailleurs, je ne sais pas encore si j'ai bien fait !

Au cas ou, voilà où j'en suis :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta name="language" content="fr" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<title>Tout en une page</title>

<link type="image/png" rel="icon" href="images/favicon.png" />
<link type="text/css" rel="stylesheet" href="style.css" />

</head>





<!-- Banniere !-->


Première ligne de titre
Deuxième ligne de titre





<nav id="nav">

<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
<li>Page4</li>
<li>Page5</li>

</nav>



SALUT PAGE1


SALUT PAGE2


SALUT PAGE3


SALUT PAGE4


SALUT PAGE5


credentials


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>
<script>

(function($){
$.fn.juizScrollTo = function(speed, v_indent){

if(!speed) var speed = 'slow';
if(!v_indent) var v_indent = 0;

return this.each(function(){
$(this).click(function(){

var goscroll = false;
var the_hash = $(this).attr("href");
var regex = new RegExp("\#(.*)","gi");

if(the_hash.match("\#(.+)")) {

the_hash = the_hash.replace(regex,"$1");

if($("#"+the_hash).length>0) {
the_element = "#" + the_hash;
goscroll = true;
}
else if($("a[name=" + the_hash + "]").length>0) {
the_element = "a[name=" + the_hash + "]";
goscroll = true;
}

if(goscroll) {
var container = 'html';
if ($.browser.webkit) container = 'body';

$(container).animate({
scrollTop:$(the_element).offset().top + v_indent
}, speed, 
function(){$(the_element).attr('tabindex','0').focus().removeAttr('tabindex');});
return false;
}
}
});
});
};
})(jQuery)

$('a:first').juizScrollTo('fast',-75).css('color', 'red');
$('a:not(:first)').juizScrollTo('slow').css('color', '#444');

</script>



<!-- don't copy below 
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-8397602-5']);
  _gaq.push(['_trackPageview']);
  _gaq.push(['_setDomainName', '.creativejuiz.fr']);

  (function() {
var ga document.createElement('script'); ga.type 'text/javascript'; ga.async = true;
ga.src ('https:' document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

-->







</html>


Remarque bien que j'ai bêtement recopié de script de scroll. J'ai essayé de le mettre en haut de page, mais ça n'a pas fonctionné. Par ailleurs, j'ai commenté l'autre car je ne comprends pas à quoi il sert.

Et la feuille :


html
{
height: 100%;
}

body
{
margin:0px;
padding:0px;
height:100%;
}

/* GESTION DE LA BANNIÈRE*/

#masthead /*bloc de toute la largeur, en haut à gauche, au dessus du reste*/
{
position:fixed; /*absolute par rapport à la fenêtre*/
top:0px;
left:0px;
z-index:100;
width:100%;
height:108px;
background-image:url(images/banniere.png);
background-repeat:no-repeat;
background-color:#bd1d49;
}

#header /* le texte du titre dans sa boite*/
{
position:absolute;
top:23px;
left:123px;
/*police*/
color:#ffffff;
font-family:'Droid Sans',sans-serif;
font-size:23px;
text-align:left;
}


/* MENU FLOTTANT */

#nav
{
    left:30px;
    margin-left:auto;
    padding:0px;
    position:fixed;
    top:260px;
    width:60px;
    z-index:1000;
}

/* "LES PAGES" */

#page1
{
position:relative;
width:100%;
min-height:100%;
background-color:#eeeeee;
padding-top:108px;
}

#page2
{
position:relative;
width:100%;
min-height:100%;
background-color:#bd1d49;
padding-top:108px;
}

#page3
{
position:relative;
width:100%;
min-height:100%;
background-color:#ffffff;
padding-top:108px;
}

#page4
{
position:relative;
width:100%;
min-height:100%;
background-color:#bd1d49;
padding-top:108px;
}

#page5
{
position:relative;
width:100%;
min-height:100%;
background-color:#eeeeee;
padding-top:108px;
}

#bottom
{
position:relative;
width:100%;
background-color:#000000;
color:#eeeeee;
}



Merci par avance de ta réponse éventuelle.
Messages postés
1757
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 mai 2020
76
essai ceci
<!DOCTYPE html>

<title>source javascript</title>
<head>

<style type="text/css">

html
{
height: 100%;
}

body
{
margin:0px;
padding:0px;
height:100%;
}

#masthead /*bloc de toute la largeur, en haut à gauche, au dessus du reste*/
{
position:fixed; /*absolute par rapport à la fenêtre*/
top:0px;
left:0px;
z-index:100;
width:100%;
height:108px;
background-image:url(images/banniere.png);
background-repeat:no-repeat;
background-color:#555555;
}

#header /* le texte du titre dans sa boite*/
{
position:absolute;
top:23px;
left:123px;
/*police*/
color:#ffffff;
font-family:'Droid Sans',sans-serif;
font-size:23px;
text-align:left;
}

#nav
{
    left:30px;
    margin-left:auto;
    padding:0px;
    position:fixed;
    top:260px;
    width:100px;
background-color:white;
    z-index:1000;
}

#page1
{
position:relative;
width:100%;
min-height:100%;
background-color:#999999;
padding-top:108px;
}

#page2
{
position:relative;
width:100%;
min-height:100%;
background-color:#bd1d49;
padding-top:108px;
}

#page3
{
position:relative;
width:100%;
min-height:100%;
background-color:#999999;
padding-top:108px;
}

#page4
{
position:relative;
width:100%;
min-height:100%;
background-color:#bd1d49;
padding-top:108px;
}

#page5
{
position:relative;
width:100%;
min-height:100%;
background-color:#999999;
padding-top:108px;
}

</style>


<script type="text/javascript">

function marchar(){

var elem=document.getElementById('nav').getElementsByTagName('li');

var hauteur_scroll=document.documentElement.scrollTop || document.body.scrollTop;

var hauteur_div=document.getElementById('page1').clientHeight

if(hauteur_scroll>=0 && hauteur_scroll<=hauteur_div){
var men=0;
}
if(hauteur_scroll>=hauteur_div && hauteur_scroll<=hauteur_div*2){
var men=1;
}
if(hauteur_scroll>=hauteur_div*2 && hauteur_scroll<=hauteur_div*3){
var men=2;
}
if(hauteur_scroll>=hauteur_div*3 && hauteur_scroll<=hauteur_div*4){
var men=3;
}
if(hauteur_scroll>=hauteur_div*4 && hauteur_scroll<=hauteur_div*5){
var men=4;
}


for (var i=0;i<elem.length;i++){

if(elem[i].style.backgroundColor=='red' && elem[men] != elem[i]){

elem[i].style.backgroundColor='white';

break;

}
}
elem[men].style.backgroundColor='red';
}


if(typeof window.addEventListener == 'undefined'){


attachEvent("onscroll",marchar);
}
else{
document.addEventListener("scroll",marchar, false);
}





var kdeme={

sens:0,
inter:0,
vitesse:0,
elem:0,

kasco:function (arg){

clearInterval(kdeme.inter)

var hauteur_scroll=document.documentElement.scrollTop || document.body.scrollTop;

kdeme.elem=document.getElementById('page'+arg)

var elemval=document.getElementById('page'+arg).offsetTop

var diff=elemval-hauteur_scroll

kdeme.sens=(diff > 0 ? 'plus' : 'moins');

kdeme.vitesse=Math.abs(diff/25)

kdeme.inter=setInterval(kdeme.kasca,20);
},



kasca:function(arg){

var ddl=(navigator.vendor) ? document.body : document.documentElement;

var hauteur_scroll=ddl.scrollTop || document.body.scrollTop;

if(kdeme.sens=='plus'){

if(hauteur_scroll + kdeme.vitesse >= kdeme.elem.offsetTop){

ddl.scrollTop=kdeme.elem.offsetTop
clearInterval(kdeme.inter)
return false;
}

ddl.scrollTop+=kdeme.vitesse
}

else{

if(hauteur_scroll -kdeme.vitesse <= kdeme.elem.offsetTop){

ddl.scrollTop=kdeme.elem.offsetTop
clearInterval(kdeme.inter)
return false;
}

ddl.scrollTop-=kdeme.vitesse
}

}

}

</script>
</head>




<!-- Banniere !-->


Première ligne de titre
Deuxième ligne de titre





   
      <nav id="nav">

<li onclick='kdeme.kasco(1)'>Page1</li>
<li onclick='kdeme.kasco(2)'>Page2</li>
<li onclick='kdeme.kasco(3)'>Page3</li>
<li onclick='kdeme.kasco(4)'>Page4</li>
<li onclick='kdeme.kasco(5)'>Page5</li>

</nav>

 


SALUT PAGE1


SALUT PAGE2


SALUT PAGE3


SALUT PAGE4


SALUT PAGE5


</html>


ca fera 2000 euros
Nickel, merci beaucoup.

Tu prends les bitcoins ?