I've been trying to implement a Figma design where the element's initial position is mid-screen height. When scrolling, the elements move up and remain visible unless out of screen view as below.
The only thing I could successfully implement is the normal scrolling where any overflow beyond the container is hidden
<div class="box">
This box has a height and a width. If too much content is displayed
within the assigned height, there will be an overflow situation. If overflow is set to
hidden then any overflow will not be visible.
</div>
.box {
margin-top: 50vh; /* or top: 50vh; */
width: 200px;
height: 100px;
overflow: scroll;
}
Is this implementation possible?
I think you want padding top of some amount of vh unit.
https://css-tricks.com/fun-viewport-units/
See below:
html,
body {
margin: 0;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
height: 100vh;
}
.scroller {
padding-top: 50vh;
height: 100vh;
overflow: auto;
box-sizing: border-box;
}
<div class="container">
<div class="scroller">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
</div>
<div class="scroller">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
</div>
<div class="scroller">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
</div>
</div>
Related
I would like to have a sidebar layout like the one in the picture:
The height of the sidebar is 100%; The Menu 1, Menu 2.. header and the div container below (the one with numbers) should also stay visible.
The only appearing scroll should be in the content div and only if the content is long enough.
What i have so far: https://codepen.io/anon/pen/oadQQE
HTML:
html,
body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
.aside{
height: 100%;
}
.header {
background: yellow;
font-size: 24px;
overflow: hidden;
}
.header ul {
list-style-type: none;
display: flex;
justify-content: space-between;
}
.header ul li{
border: 1px solid red;
}
.fixed{
border: 1px solid blue;
font-size: 24px;
}
.content{
border: 1px solid red;
height: 100%;
overflow: auto;
}
<div class-"aside">
<header class="header">
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</nav>
</header>
<div class="fixed">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
<button>Button 5</button>
</div>
<div class="content">
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
</div>
</div>
Edit: leaving this for future reference from W3Schools:
Note: The overflow property only works for block elements with a specified height.
You can do this by setting display: flex on the sidebar itself with a flex-direction: column;.
html,
body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
.aside {
height: 100%;
display: flex;
flex-direction: column;
}
.header {
background: yellow;
font-size: 24px;
}
.header ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
.header ul li {
border: 1px solid red;
}
.fixed {
border: 1px solid blue;
font-size: 24px;
}
.content {
border: 1px solid red;
overflow: auto;
}
<div class="aside">
<header class="header">
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</nav>
</header>
<div class="fixed">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
<button>Button 5</button>
</div>
<div class="content">
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
</div>
</div>
I'm having difficulty creating this effect where the content in the hero is completely scrolled through (100% of the viewport) then the other sections of the page will show. I set it so the background is fixed. The stage div (which should be vertically centered) should come as you are scrolling with bottom padding separating and the second section should not show until fully scrolled. Not entirely sure what I am doing wrong. Code and codepen is below
http://codepen.io/anon/pen/xRPeJj
$(document).ready(function(){
var windowHeight = $(window).height();
$('#stage_1').css({"height": windowHeight + 'px'});
$('#stage_1').bind('scroll', function() {
if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight) {
$('.second-section').css("background-attachment", "scroll");
}
});
});
body, html {
height: 100%;
margin: 0;
}
.container {
padding: 0 1em;
margin: 0 auto;
width: 1000px;
}
.hero {
background-size: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
color: #fff;
background-image: url("http://www.jshiebert.com/wp-content/uploads/2015/12/photo-1424020128429-a60765861de1.jpg");
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
width: 100%;
height: 100vh;
flex-direction: column;
}
#stage_1 {
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hero">
<div class="container">
<div id="stage_1">
<div class="hero__text">
<h1>lorem to<span>the Rocks</span></h1>
<h2>Enter for your chance to explore the Rocky Mountains at River Stone Resort & lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam repudiandae nesciunt iusto eveniet! </h2>
</div>
</div>
<div id="stage_2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab fuga fugit, repellendus, reprehenderit itaque cum suscipit. Error magni, ipsum eligendi suscipit, rerum vero doloremque culpa, deleniti quae id repellat veniam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus recusandae vel sed at repudiandae ipsam, natus laborum. Sit vitae eos labore, explicabo, blanditiis debitis aut dolor, nesciunt nam ratione temporibus.
</div>
</div>
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio ab, neque autem sequi maxime architecto praesentium aspernatur veritatis corporis voluptas vitae, nemo at mollitia aperiam! Reprehenderit facere esse officiis voluptas. Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Neque molestias hic nihil provident repellat, ad quas doloremque placeat consequuntur voluptatem, repellendus suscipit voluptate aspernatur ea! Voluptatem, est ducimus? Aliquam, voluptates. lorem Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Deleniti consequatur modi excepturi fuga corrupti, tempora, odit accusamus vitae ex, reiciendis maxime porro ipsa quisquam repudiandae, veritatis asperiores fugit. Eveniet, ipsam!Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Dolore fuga, dignissimos aperiam velit officiis cum voluptate deleniti praesentium at et aliquam natus, consequuntur dolorem repellendus eos mollitia libero esse omnis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto
maxime, delectus, quis eaque ex quibusdam impedit voluptate, in totam corporis repellat ipsa molestias minima vitae laborum explicabo possimus tempore dolore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, facere iusto? Suscipit quisquam
excepturi facilis vel reprehenderit inventore perspiciatis autem dolore minima cumque. Dolores suscipit rem, accusantium perferendis vel deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora deserunt esse ab molestiae debitis aliquid
sunt assumenda laborum, laudantium, iste explicabo quae magni vel ipsum quas quos impedit sequi dicta!
</div>
) ,
I explain my little problem ( sorry for my english):
I have a list of element (div) in left ( constraint in size) with a scrollbar (auto)
(a custom scroll but it's the same problem with the basic scroll).
All of this "element" can be open (with a "+" button) that open a "sub element" IN the list.
Problem , by example if you open the last element you can't see the sub element without scroll to this sub element, i would like add a js for scrolling to this open sub-element"
I explain with image what i would like have: http://www.nanosix.be/test/help.jpg
and i make a simply version on jsfiddle here :
https://jsfiddle.net/9Lrhfqmk/
<body>
<div class="menu">
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
</div>
<script>
$(".button").click(function() {
$(this).parent(".ele").children(".other").toggleClass("displayblock");
});
</script>
</body>
Here is the updated fiddle: https://jsfiddle.net/9Lrhfqmk/2/
You have to do something like this:
$( ".button" ).click(function() {
var parent = $(this).parent(".ele");
var other = parent.children(".other");
other.toggleClass("displayblock");
if(other.hasClass("displayblock")){
$(".menu").scrollTop(other.offset().top);
}
else{
$(".menu").scrollTop(parent.offset().top);
}
});
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I've got a DIV, automaticly filled via PHP with Data. I need a small script that scrolls down inside the filled DIV if the DIV-size goes out of view (or reaches a maximum size) and then back to top, periodicly. I've already tried a lot of Plugins bot no one works like i expect.
The HTML basicly looks like this:
<div id="header"></div>
<div id="wrapper">
<div id="content">
<div id="placeholder">!THIS IS FILLED UP!</div>
</div>
</div>
<style>
body {
background-color: #999999;
margin: 0 0 0 0;
overflow: hidden;
}
#wrapper {
margin: auto;
width: 1900px;
}
#header {
height: 100px;
}
#content {
width: 1900px;
min-height: 150px;
margin-top: 20px;
}
#placeholder {
}
</style>
Are you trying something like this?
$(function () {
$("html, body").animate({
scrollTop: $("body")[0].scrollHeight
}, 1000, function () {
$("html, body").animate({
scrollTop: 0
}, 1000);
});
});
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="filler">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem asperiores placeat, ab earum nulla nemo, temporibus officiis facilis pariatur ea veritatis ratione in velit unde vel illo, ipsa voluptatibus tempore.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat sapiente reiciendis, hic ducimus recusandae, expedita distinctio temporibus numquam modi, quia maxime laboriosam quibusdam explicabo amet aspernatur natus, repudiandae necessitatibus. Inventore.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A excepturi, reiciendis labore quis! Ipsa necessitatibus laudantium numquam debitis architecto enim fugiat iusto deserunt, dolorum asperiores pariatur, labore, dolores modi ad!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit corporis aut porro officiis optio? Corporis perspiciatis reprehenderit blanditiis eos. Reprehenderit repellat quaerat nihil nostrum, quidem earum dolore sed repudiandae deleniti!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, vitae aut molestias harum placeat obcaecati, distinctio vel debitis delectus vero quia unde tempore nisi possimus in modi expedita. Adipisci, repellendus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet iste et ex est blanditiis assumenda natus dicta alias facere mollitia. Possimus natus iure, est alias consequatur enim dolorum eos cupiditate.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto iste quos, ipsam obcaecati, modi laboriosam dignissimos at incidunt vel unde ad cum. Consequatur, ut, dolorem. Minima officia atque similique aperiam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur natus, dolor suscipit! Eius natus officia, est quos, blanditiis repellat iste in soluta ipsam! Soluta quas aspernatur itaque, in reiciendis tenetur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum placeat possimus neque ipsa eaque blanditiis similique harum. Tempora rerum, eaque, eum nisi suscipit dolorem reiciendis, unde dignissimos porro consectetur beatae.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque odio deserunt a, repudiandae alias saepe. Non commodi dolorum maxime laborum. Pariatur possimus earum dolor quis aut tempora et eius ducimus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate quos fugiat doloribus doloremque magni voluptas quas voluptatum molestiae amet optio animi fugit vel, iste id esse ratione eum minima tenetur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eaque non nobis, a voluptas facilis minus sunt vero tempora facere. Mollitia dignissimos nobis dolore dolorum, aliquam perspiciatis laborum architecto maiores.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae debitis reiciendis, tenetur ex provident? Perspiciatis, deleniti, exercitationem? Ab nihil eligendi, ipsum, possimus blanditiis, fugit enim totam at reiciendis sequi recusandae.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius porro fuga, exercitationem dignissimos, illum, soluta nam hic enim, ad non. Voluptatibus reiciendis, quas nihil mollitia quae rem neque officiis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste optio, architecto. Quis harum fugiat provident! Enim asperiores quam neque et recusandae, esse impedit dolores hic minima in. Explicabo, saepe, dolore.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed laudantium quod iure soluta quis nemo officiis neque, reprehenderit voluptas doloribus veniam veritatis omnis sapiente vero, eum, commodi tempore amet ipsa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur id autem quaerat obcaecati et non, deserunt nisi aspernatur, sit quod suscipit voluptas possimus aperiam, nihil in minima reiciendis maiores ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, laudantium! Repellendus enim suscipit nobis veritatis accusantium minima possimus repellat ab omnis quia in voluptatum quas dolor, similique fugiat dignissimos numquam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, aliquid dolor! Sequi ex quo laborum maiores quidem officiis, officia vel perferendis? Voluptate, ipsum magni. Repudiandae, deleniti officia architecto tempora nihil!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta fugit officia magnam nesciunt, voluptas eius velit veritatis alias ab iure, delectus repudiandae cum ipsum cumque rem eligendi ullam? Neque, quos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga sit provident illum modi, quod aut distinctio accusamus facilis tenetur, natus vel temporibus officiis sed voluptatibus ratione tempore sint, totam dicta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam saepe veritatis iure sint similique totam eaque doloremque laboriosam reiciendis eos quae modi atque, quibusdam quos officiis, temporibus sed pariatur repellat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam delectus, iste molestias vitae. Fugit doloribus accusantium expedita, sunt fuga, rerum impedit et enim accusamus dicta provident corporis. Ex, quis, alias.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, quisquam eos dicta totam at fugiat hic eum itaque minima, est dolorem et voluptatum nesciunt ipsa perspiciatis inventore enim ratione animi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus sequi obcaecati quia deleniti libero veniam, voluptatum itaque totam voluptatem nostrum sapiente, doloribus tenetur ipsa. Animi et quam laudantium. Quae, laborum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia consectetur quam voluptate possimus saepe sequi deleniti doloribus iusto! A modi, rerum ipsa similique facere quasi repudiandae quia, molestiae soluta veniam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates vitae at eum distinctio id animi, aliquid ipsam perferendis dolor, vero rem provident unde beatae temporibus quidem dolorem necessitatibus itaque facilis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum illum saepe fugiat dolore. Ad quo maiores a nam vitae vel minus facere quis harum quod, eligendi repellendus, cum repellat optio.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis quibusdam consequatur numquam eveniet voluptates quae libero eaque perspiciatis cum dolor maxime, modi veritatis et quia reprehenderit, praesentium illum pariatur! Deleniti.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem atque fuga nisi dolores mollitia veritatis porro perferendis officia perspiciatis fugiat eos at incidunt, nam harum, quis, alias dolor minima sunt!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur cum in eveniet aut iure dignissimos ex accusamus perferendis, culpa, velit quisquam, inventore a. Voluptatum, at quibusdam, nesciunt iure voluptates tempora.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum hic incidunt nam, provident odit sed animi aperiam, dicta ex assumenda fugiat corrupti obcaecati iure eligendi maiores voluptas enim, quaerat. Cupiditate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate modi, sit nihil fugiat, harum molestias dolore ipsum vitae dicta voluptatibus inventore atque voluptatem. Non voluptatem corrupti, blanditiis repellat omnis voluptates!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo modi provident porro quibusdam voluptatibus quis molestiae aspernatur fugit unde quisquam architecto sapiente tenetur reprehenderit repellat esse nesciunt cumque, iure excepturi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit aliquid perspiciatis possimus distinctio, minus eaque fuga, voluptates cumque, molestiae odio sequi. Iste, quia dolorum soluta adipisci voluptatem animi, a odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et explicabo deleniti alias possimus, at voluptatum porro veniam placeat voluptatem maiores facilis molestias a debitis tempore. Odit nemo, ea labore fugit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi expedita, enim doloribus inventore odio. Fugiat rerum animi eius rem sit, culpa laboriosam nisi voluptas sequi incidunt blanditiis nesciunt quasi ad?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, esse beatae. Non placeat veniam, enim nemo doloremque necessitatibus sed, quaerat unde, facilis temporibus eveniet deserunt alias dicta ea officiis expedita.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur nemo molestiae vero pariatur harum, quisquam expedita modi! Placeat corrupti, dolorem, tempore mollitia facere, tempora veniam expedita dolores sed consectetur voluptas.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis optio dolorum minima dolor, sunt, suscipit id dicta, labore repudiandae nobis itaque inventore possimus architecto, qui sed vel temporibus quibusdam placeat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In explicabo, nobis natus necessitatibus autem voluptatibus sint voluptas, iste ducimus porro alias dicta quod aperiam vitae! Laborum maiores accusantium ipsam voluptatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cum aspernatur aliquid sint, impedit rem et quas? Expedita voluptatibus laudantium recusandae facilis quaerat possimus quas tenetur repellat eum non!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi possimus maxime ab maiores illo, sed porro itaque odio facere aspernatur corporis saepe, et cum dicta a. Omnis pariatur perferendis reprehenderit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste saepe rem repellat esse aperiam doloribus ad, aspernatur! Iste dolor consectetur, voluptates quas tenetur esse officiis eum, possimus debitis blanditiis maiores?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iste, consectetur ab architecto ipsam deleniti consequuntur in, laudantium eaque quaerat, aut suscipit numquam perferendis nesciunt sit aperiam odit obcaecati saepe!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id corporis facilis, recusandae doloremque! Voluptas dolor eos, labore quaerat atque sit officia voluptates magni dolorem enim ab, vero obcaecati libero, quidem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores expedita ducimus explicabo libero tempora dolore recusandae. Maxime facere aliquid laudantium, consequuntur, animi voluptatem ipsam qui sunt illo, repellat architecto sapiente.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae illo, ex placeat asperiores est natus. Maiores quas, eligendi ipsa repellat hic sed illo explicabo, voluptatum harum sit omnis veniam mollitia.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ea ipsum similique sed non, temporibus, nulla ipsam omnis ratione! Ullam culpa itaque, voluptatum quibusdam doloribus commodi quidem molestias nemo enim!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus consequatur commodi vel accusantium, iure ipsum. Eligendi eos, animi, nam, iste voluptatum adipisci excepturi beatae culpa itaque eveniet vitae libero ducimus.</p>
</div>
With plain Vanilla JS you could try something like this
var example = document.getElementsByClassName("example")[0],
content = example.getElementsByClassName("content")[0];
function scrollDown(scrollSpeed, endPause, restartPause) {
setTimeout(function () {
if (example.scrollTop === content.offsetHeight - example.offsetHeight) {
setTimeout(function () {
example.scrollTop = 0;
setTimeout(function () {
scrollDown(scrollSpeed, endPause, restartPause);
}, restartPause || 0);
}, endPause || 0);
} else {
example.scrollTop += 1;
scrollDown(scrollSpeed, endPause, restartPause);
}
}, scrollSpeed);
};
setTimeout(function () {
scrollDown(10, 1000, 1000);
}, 1000); // Initial delay
.example {
height: 100px;
background-color: #f00;
overflow-y: scroll;
}
.content {
padding: 0.1px;
}
<div class="example">
<div class="content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
Here a codepen example
In addition, in order to allow user to scroll easily, you could create a condition into the scrollDown that check if the class .is-hovered is on the .content item and not change the scrollTop value in this case.
After, just add .is-hovered class when mouseenter event is triggered and remove .is-hovered when mouseleave is triggered from .content
I'm trying to get the distance from the top of an element and the top of the page every time the user scrolls. I got it to work but when you scroll, it says the distance hasn't changed. I tried to solve this with a closure but I am not really great with closures. Theres a demo of what I have so far here: http://addisonbean.com/test/ it logs the distance in the console.
I know there may be an easier way to do this, but I'm would really like to know what I'm doing wrong. Can anyone help me with this?
And this is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FitGird</title>
<link rel="stylesheet" href="fitgrid.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="fg12">Addison Bean.</h1>
<div class="row">
<h2>Article</h2>
<hr class="fg6">
<hr class="fg6 hidden">
<p class="fg6">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. </p>
<p class="fg6">2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. </p>
</div>
<div class="row">
<p class="fg6">3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. </p>
<p class="fg6">4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. </p>
</div>
<div class="row">
<p class="fg6">5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. </p>
<p class="fg6">6. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. </p>
</div>
<div class="row">
<p class="fg6">5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. </p>
<p class="fg6">6. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. </p>
</div>
<div class="row">
<p class="fg6">5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. </p>
<p class="fg6">6. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. </p>
</div>
<div class="row">
<p class="fg6">5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. </p>
<p class="fg6">6. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. </p>
</div>
</div>
<script>
var elem = document.getElementsByTagName('h2')[0];
function makeScrollOffset(el) {
function getWindowOffset() {
var woff = el.getBoundingClientRect().top,
soff = window.pageYOffset;
var dist = Math.round(woff + soff);
console.log(dist);
}
return getWindowOffset;
}
window.onscroll = makeScrollOffset(elem);
</script>
</body>
</html>
With your code it should be:
var dist = Math.round(woff-soff);
Example here
this works very well and returns the distance:
window.onscroll = function ()
{
console.log(document.getElementsByTagName('h2')[0].getBoundingClientRect().top);
}
note that negative number means the selected elements is above the viewport's top line and positive numbers means under this line. if you get the number 0, the element's top is perfectly aligned with the viewport's top line.