All geek questions in one place

CSS - move the div to a click that is not displayed before.

I have a fiddle page where I would like the click click event to display scrollTop in a .panel-two div. I tried some jQuery plugins but nothing worked. The problem is that I cannot use scrollTop if the div is not displayed and cannot animate scrollIntoView .

This is html:

 <body> <!-- Close button --> <button class="close-button" aria-label="Close menu" type="button" data-close> <span aria-hidden="true">&times;</span> </button> <div class="off-canvas position-left" id="offCanvas" data-off-canvas> <!-- Menu --> <ul class="vertical menu"> <li><a href="#">Foundation</a></li> <li><a href="#">Dot</a></li> <li><a href="#">ZURB</a></li> <li><a href="#">Com</a></li> <li><a href="#">Slash</a></li> <li><a href="#">Sites</a></li> </ul> </div> <div id="bg"> </div> <div class="panel panel-one"> <div class="panel-inner"> <div class="content"> <h1>Lorem ipsum dolor sit amet</h1> <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula pharetra.</p> </div> </div> </div> <div class="panel panel-two"> <div class="panel-inner"> <h2>Lorem ipsum dolor sit amet</h2> <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula pharetra.</p> </div> </div> </body>

I plan to have a slider in the .panel-one div with images, where clicking on the image will scroll through the associated div until the screen is captured.

div .panel-one should take over the entire screen and the user will not be able to scroll down. Only after the div .panel-two on a click of the image, then the user can scroll back to show the div .panel-one again. .panel-two should disappear below the screen.

+5
source share
1 answer

Perhaps the answer is a bit late, but I think this will help you install the image slider in panel-one :

  • First I hide the scrollbar:

     $('body').css('overflow', 'hidden');

  • In panel-one click, you can animate panel-two :

     $(".panel-one").on('click', function() { $('html, body').animate({ scrollTop: $('.panel-two').offset().top }, 1000, function() { $('body').css('overflow', 'auto'); }); });

    also remember to include overflow at the end of the animation.

  • Now add a scroll listener to hide the scrollbar as soon as the user scrolls up to the top of panel-one :

     $(document).scroll(function() { if ($(window).scrollTop() == 0) $('body').css('overflow', 'hidden'); });

See the demo below:

 $(".close-button").on('click', function() { if ($("#offCanvas").css('margin-left') < '0') { $("#offCanvas").css('margin-left', '0'); $(".panel").css('margin-left', '50%'); $("#bg").css('margin-left', '50%'); } else { $("#offCanvas").css('margin-left', '-50%'); $(".panel").css('margin-left', '0'); $("#bg").css('margin-left', '0'); } }); $('body').css('overflow', 'hidden'); $(".panel-one").on('click', function() { $('html, body').animate({ scrollTop: $('.panel-two').offset().top }, 1000, function() { $('body').css('overflow', 'auto'); }); }); $(document).scroll(function() { if ($(window).scrollTop() == 0) $('body').css('overflow', 'hidden'); }); 
 #offCanvas { position: fixed; z-index: 999; background-color: black; width: 50%; margin-left: -50%; height: 100%; } .close-button { position: fixed; z-index: 1000; } #bg { background-image: url('https://unsplash.it/500?random'); background-size: cover; z-index: -1; animation: zoom 10s; height: 100%; width: 100vw; position: fixed; -webkit-animation-fill-mode: forwards; background-attachment: fixed; } @keyframes zoom { 0% { transform: scale(1, 1); } 100% { transform: scale(1.1, 1.1); } } html, body { margin: 0; height: 100%; } .panel { position: relative; min-height: 100vh; width: 100%; z-index: 5; } .panel-fixed { z-index: 1; } .panel-inner { padding: 1em; width: 100%; } .panel-fixed .panel-inner { position: fixed; top: 0; left: 0; z-index: 2; } /* Base */ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .panel-two { background-color: blue; } .content { position: fixed; } body { overflow-x: hidden; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <!-- Close button --> <button class="close-button" aria-label="Close menu" type="button" data-close> <span aria-hidden="true">&times;</span> </button> <div class="off-canvas position-left" id="offCanvas" data-off-canvas> <!-- Menu --> <ul class="vertical menu"> <li><a href="#">Foundation</a> </li> <li><a href="#">Dot</a> </li> <li><a href="#">ZURB</a> </li> <li><a href="#">Com</a> </li> <li><a href="#">Slash</a> </li> <li><a href="#">Sites</a> </li> </ul> </div> <div id="bg"> </div> <div class="panel panel-one"> <div class="panel-inner"> <div class="content"> <h1>Lorem ipsum dolor sit amet</h1> <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula pharetra.</p> </div> </div> </div> <div class="panel panel-two"> <div class="panel-inner"> <h2>Lorem ipsum dolor sit amet</h2> <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula pharetra.</p> </div> </div> </body>
0
source

Source: https://habr.com/ru/post/1259040/

More articles:


All Articles