Rendre une div non scrollable voire la masquer lors d'un scroll ?

Version imprimable

23/11/2015, 22h48
dhillig

Rendre une div non scrollable voire la masquer lors d'un scroll ?

Bonsoir à tous,
J'ai un diaporama fullscreen et une barre des menus. Lorsque je clique sur un des liens, la "section une" placée à top:100% s'affiche, puis la "section deux" etc...
Mais si on scrolle vert le haut , on retombe sur le diaporama fullscreen (car placé avant section une), pas très joli joli :roll:
Y'a-t'il moyen quand cliquant sur "section une", que cette div soit considérée comme la première de la page ? J'entends par là on peut évidemment scroller vers le bas, vers le haut mais pas au dessus de section une. Un peut comme si le diaporama était devenu hidden (ou non). Faire en sorte que section une soit à top: 0 mais scrollable.
Ça me semble très compliqué et non faisable :(. Mais au cas où...
Bonne soirée,
dh
24/11/2015, 08h16
SpaceFrog

css overflow hidden

Bonsoir SpaceFrog et merci pour ta réponse,
overflow: hidden ne fonctionne pas dans mon cas bien spécial :?
Attention, je ne pense pas que mon problème soit possible à résoudre (mais avec la magie des scripts... (?) :weird:
le début de mon body :
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 28 29 30 31 32 33 34 35 36 37 38 39 <header class="main_header"> <div class="menu"> <div class="content"><a class="logo" href="#">Logo</a> <div class="mobile-toggle"> <span></span> <span></span> <span></span> </div> <nav> <ul> <li><a href=".sec01">Section 01</a></li> <li><a href=".sec02">Section 02</a></li> <li><a href=".sec03">Section 03</a></li> <li><a href=".sec04">Section 04</a></li> </ul> </nav> </div> </div> </header> <h1><span><a href="#section01">Test</a></span><br>Navigation</h1> <div id="bg"> <div id="bg1"> <h1>joli titre</h1> <div id="polina"> <h1>Polina</h1> <p>Encore une page test</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor.</p> <img src="../test/nwvjv57YA31u99f8jo1_540.jpg" width="515" height="810" alt=""/> <a href=".sec01">Section 01</a> </div></div> <div id="bg2"> <div> <h1>Polina2</h1> <p>Aenean pharetraam <a href=".sec01">Section 01</a> tuntesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nisl.</p> </div> </div> <div id="bg3"> <div> <h1>Polina3</h1> <p>Ut enim quisque sibi plurimum confidit et ut quisque maxime virtute et sapientia sic munitus est, ut nullo egeat suaque omnia in se ipso posita iudicet, ita in amicitiis expetendis colendisque maxime excellit. Quid enim? Africanus indigens mei? Minime hercule! ac ne ego quidem illius; sed ego admiratione quadam virtutis eius, ille vicissim opinione fortasse non nulla, quam de meis moribus habebat, me dilexit; auxit benevolentiam consuetudo. Sed quamquam utilitates multae et magnae consecutae sunt, non sunt tamen ab earum spe causae diligendi profectae.</p> </div> </div> </div>
la div "bg" est "fullscreen".
Je souhaiterais qu'en cliquant sur les liens .sec01,02,03 et 04 et #section01 (qui ne sont que des div suivant la div bg) via

Code:

<h1><span><a href="#section01">Test</a></span><br>Navigation</h1>

ou le menu, on ne puisse plus accéder par scroll à la div "bg".
Avoir l'impression que la div .sec01 (#section01) soit la première de la page, et ce qui suit soit scrollable.
Ne pouvoir accéder à la div bg (celle que je veux "masquer") que via

Code:

<div class="content"><a class="logo" href="#">Logo</a>

Désolé pour toutes les répétitions, mais je tente d'être compréhensible.
La logique voudrait que les liens cités plus haut fassent appel à une seconde page (avec les div .sec01,02,03 et 04 et #section01); mais je tente vraiment de contenir le tout dans un seul et même site onepage, en espérant que cela soit possible.
Merci encore pour ta réponse et bonne soirée,
dh

25/11/2015, 08h46
SpaceFrog

Un peu sur ce principe là ?
http://fiddle.jshell.net/7d3Luat4/

TROP FORT !!!

Bonsoir SpaceFrog,
Je suis sur le cul si tu me permets l'expression 8-) Je ne pensais vraiment pas cela réalisable, C'EST EXACTEMENT ÇA ;)!!! Malheureusement, pas fonctionnel chez moi. Pour tester j'ai changé la hauteur du fullscreen de 100 % à 300 px (le px est obligatoire, non ? :( etc... pour vraiment adapter ton Edit fiddle à ma page. Peut-être un conflit avec d'autres Scrolltop (?)... ou j'ai tout simplement oublié de dire certaines choses :oops:
Le lien (#section01 .sc01) sur le fullscreen ne figure que via des "fenêtres" (bg>div>div)
L'exemple :
http://codepen.io/jreaux62/pen/EVrdOM
Le menu lui n'apparait que lorsqu'on clique sur le lien figurant dans le bg>div>div (ou en scrollant un peu vers le bas). Le script du menu :
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 28 29 30 31 32 33 34 $(window).scroll(function() { if ($(window).scrollTop() > 100) { $('.main_header').addClass('sticky'); } else { $('.main_header').removeClass('sticky'); } }); // Mobile Navigation $('.mobile-toggle').click(function() { if ($('.main_header').hasClass('open-nav')) { $('.main_header').removeClass('open-nav'); } else { $('.main_header').addClass('open-nav'); } }); $('.main_header li a').click(function() { if ($('.main_header').hasClass('open-nav')) { $('.navigation').removeClass('open-nav'); $('.main_header').removeClass('open-nav'); } }); $('nav a').click(function(event) { var id = $(this).attr("href"); var offset = 0; var target = $(id).offset().top - offset; $('html, body').animate({ scrollTop: target }, 500); event.preventDefault(); });
#section01 (.sec01) a lui un margin-top très élevé (pour éviter qu'il soit visible en scrollant vers le bas). Mais tu as compris à 100% ce que je désirais, ne plus avoir accès au fullscreen (bg) via le scroll.
Reste la hauteur de 100% dans les scripts, je n'ai jamais résolu ce problème; et jamais lancé de discussion à ce sujet (j'ai toujours réussi à "contourner" l'obstacle :roll: )
Encore merci pour ton aide ! TOP !!!
dh

Bonsoir SpaceFrog,
J'ai tenté de trouver une solution, mais je n'arrive pas à faire fonctionner la fonction animate (qui fonctionne à merveille dans ton EditFiddle):?
Dans ton script, lors d'un clic sur "my menu", la cible est "bg" (de 300 px de hauteur) avec une animation qui fait remonter (et fixe) cette div de 300 px.
Dans mon cas, le scroll "vers le haut" est toujours possible :calim2:
La div suivante "section01" a, dans ma page, un margin-top de 3000px,
j'ai donc essayé ce script :
Code:

1 2 3 4 5 6 7 8 $('#mymenu ul li a').on('click' , function(e){ e.preventDefault(); nr=$(this).data('link') cible="#section01"+nr; $('#section01').animate({'scrollTop':(nr-1) * 3000 } ) }) })
Logiquement (mais je suis nul en js) la div section01 devrait arriver à top -3000px (l'équivalent du margin-top). Mais comme précédemment, le scroll vers le haut est toujours possible.
Le problème viendrait-il des CSS ? J'ai tenté d'y changer pas mal de choses... rien y fait :(
Merci pour ton aide et bonne soirée,
dh

27/11/2015, 20h17
dhillig

Je tente de trouver une solution

Bonsoir à tous,
Ne pouvant résoudre mon problème par la fonction animate (dans mon cas), j'ai pensé à cette solution :
passer la div "bg" en z-index: 999,
passer le menu en z-index: 9999,
supprimer le margin-top de #section01 (et le reste) qui sera en z-index: 99 et donc masqué par la div "bg".
Maintenant que "tout est en place", est-il possible de rendre "hidden" la div "bg" lors d'un clic, et la faire réapparaître en cliquant sur "logo" (menu) ?
Je ne sais pas si l'idée est bonne ? :roll:
Bonne soirée et bon week-end à vous,
dh
28/11/2015, 12h41
NoSmoking

Bonjour,

Citation:

Maintenant que "tout est en place", est-il possible de rendre "hidden" la div "bg" lors d'un clic, et la faire réapparaître en cliquant sur "logo" (menu) ?

Oui et tu as déjà utilisé cette méthode dans ton code !

Bonjour NoSmoking,
Merci pour ta réponse ;)

Veux-tu dire :

Code:

1
2
3
4
5
6
7
8
9
10
$( function(){
 
    $('#mymenu ul li a').on('click' , function(e){
        e.preventDefault();
        nr=$(this).data('link')
        cible="#bg"+nr;
 
      $('#bg').et là je mets un hidden à bg ?  } )
    })
})

?
Bon week-end,
dh

28/11/2015, 13h46
NoSmoking

Citation:

$('#bg').et là je mets un hidden à bg ? } )

par exemple oui ! (jQuery.hide()).

La pensée du jour :

Essayer c'est découvrir !

re NoSmoking,
:ptdr:
MERCI pour tes réponses et le lien JQuery (et MERCI encore à SpaceFrog dont le code est utilisé ;)
Non seulement ça fonctionne, mais en plus le .hide en "slow" est très agréable visuellement.
Seul petit problème, la div "bg" étant "hidden", on y a plus accès par la barre des menus :roll:
J'ai donc rajouté qq lignes au script :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 $( function(){ $('#mymenu ul li a').on('click' , function(e){ e.preventDefault(); nr=$(this).data('link') cible="#bg"+nr; $('#bg').hide( "slow" ); }) }) $( function(){ $('.logo').on('click' , function(e){ e.preventDefault(); nr=$(this).data('link') cible="#bg"+nr; $('#bg').show( "slow" ); }) })
Vu que ça fonctionne, sujet RESOLU !!! Mais mes lignes rajoutées sont-elles correctes ?
Encore merci à toi et à SpaceFrog !!!
:zoubi:
Bon week-end !
dh

Tu peux opérer un regroupement
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 $(function() { $('#mymenu ul li a').on('click', function(e) { e.preventDefault(); nr = $(this).data('link') cible = "#bg" + nr; $('#bg').hide("slow"); }); $('.logo').on('click', function(e) { e.preventDefault(); nr = $(this).data('link') cible = "#bg" + nr; $('#bg').show("slow"); }) })
• Si l'élément de class logo n'est pas un lien ou autre bouton submit le e.preventDefault(); ne te sert à rien.

• Ta variable nr, utilisée en local, devrait être précédée du mot clé var, plus propre, mai à quoi te sert elle réellement ?

• A quoi te sert la variable cible ?

Citation:

• Si l'élément de class logo n'est pas un lien ou autre bouton submit le e.preventDefault(); ne te sert à rien.

Effectivement.

Citation:

• Ta variable nr, utilisée en local, devrait être précédée du mot clé var, plus propre, mai à quoi te sert elle réellement ?

Je n'ai pas réussi à trouver la signification de cette variable :oops:

Citation:

• A quoi te sert la variable cible ?

A rien apparemment :calim2:
le nouveau code (fonctionnel :)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 $( function(){ $('#mymenu ul li a').on('click' , function(e){ var nr=$(this).data('link') $('#bgfadewrap').hide( "slow" ); }) }) $( function(){ $('.logo').on('click' , function(e){ var nr=$(this).data('link') $('#bgfadewrap').show( "slow" ); }) })
Peut-on encore l'épurer ?
J'ai un autre petit soucis, la div "bg" étant fullscreen et avec un z-index supérieur, elle masque les autres div, ce qui était le but :)
Mais elle est scrollable, ce qui est stupide :weird: Peut-on empêcher le scroll ? Les CSS :
Code:

1 2 3 4 5 6 7 8 9 z-index:1; top:0; left:0; bottom:0; right:0; width:100%; height:100%; overflow:hidden; position:absolute;
Je suis bien tombé sur ce script :
Code:

1 2 3 4 5 function show(){ //ici gestion de l'affichage de la div var body = document.querySelectorAll('body'); body[0].style.overflow = "hidden";//querySelectorAll renvoi un tableau }
Mais impossible d'y comprendre qq chose :calim2:
Merci pour ton aide :zoubi:
dh