nested section scroll 100vh - javascript

i am trying to do a section that is fixed when you scroll it start to scroll the inner articles by 100vh
inside the section like having a a block of section 100vh , and scroll the inner articles by 100vh :
HTML :
<section class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis similique
expedita dolore, suscipit,
velit temporibus iusto ad, praesentium officia nemo nihil rerum necessitatibus excepturi
possimus
tempora maxime quam dolor culpa.</section>
<section id="process">
<article><h1>THIS IS ARTICLE 1</h1></article>
<article><h1>THIS IS ARTICLE 2</h1></article>
<article><h1>THIS IS ARTICLE 3</h1></article>
<article><h1>THIS IS ARTICLE 4</h1></article>
<article><h1>THIS IS ARTICLE 5</h1></article>
</section>
<section class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis
similique expedita dolore, suscipit,
velit temporibus iusto ad, praesentium officia nemo nihil rerum necessitatibus excepturi
possimus
tempora maxime quam dolor culpa.</section>
CSS :
#process{
width: 100%;
position: relative;
z-index: -1;
background: black;
color: white;
font-size: 5rem;
height: 100vh;
}
#process article{
width: 100%;
height: 100vh;
max-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.lorem{
width: 100%;
height: 100vh;
font-size: 3rem;
}
all i want to do when you scroll into the 2nd section it goes fixed in the screen and when you scroll only the inner articles change inside the section with the same background after finish reading the articles it goes to the 3rd section , how can i achieve that ?
EDIT :
something like this

decrease the height for better view and what is your question about ..

Related

Auto-growing modal Dialog in CSS that should not grow out of screen

I am currently working on a web app targeting tablets. I would like to show a modal dialog (titlebar + body) that grows (in height) no bigger than it's content requires, but if the content demands a height that would be bigger than the viewport, the dialog should instead have a scroll bar on the body element and a maximum height of the viewport's/parents height.
Can I somehow achieve this with CSS/JS?
You were so close
Here take a look
i added overflow-y: hidden; to .dialog and it works
.screen {
width: 800px;
height: 200px;
font-family: sans-serif;
display: grid;
place-items: center;
background-color: gray;
}
div.titlebar {
background-color: green;
height: 32px;
display: grid;
place-items: center;
}
div.body {
overflow-y: scroll;
background-color: purple;
/* setting height to 100% (of the parent) */
/* minus the 32px of the header */
height: calc(100% - 32px);
}
div.dialog {
width: 400px;
height: auto; /* auto size ... */
max-height: 100%; /* ... but dont grow bigger than screen */
display: flex;
flex-direction: column;
background-color: yellow;
overflow-y: hidden;
}
<div class="screen">
<div class="dialog">
<div class="titlebar">Title</div>
<div class="body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error
praesentium aut laboriosam modi eius ex cum, ullam placeat, beatae,
nobis est quasi voluptate alias necessitatibus excepturi? Voluptas,
ut! Maxime consequuntur, quod? Ipsa ullam eveniet, dolore voluptas
eius obcaecati vero sint aut at sapiente! Vel iure distinctio pariatur
maxime, illo ab voluptate veritatis, porro delectus, earum molestiae
at ipsam ducimus dicta. Laboriosam perspiciatis molestias voluptatibus
modi dolorem ea asperiores assumenda alias minus, saepe facilis nam
consequuntur nulla ipsum delectus totam itaque consequatur molestiae.
Quibusdam nam, vero fugit mollitia minima dolor, eveniet obcaecati
sint iste inventore explicabo eligendi ratione harum, tempore quasi.
</div>
</div>
</div>
You could probably just use max-height: 100vh; and overflow-y: auto;.
Feel free to reduce the value of max-height or use calc(100vh - 30px) as a value if you need to remove some margin from the height of the modal.

Sticky header and hidden content with box-shadow

I'm new to coding and on my way to becoming a Junior Dev. This is also my first post on Stack Overflow.
Situation:
I have made a sticky header that has a box-shadow property intended to uncover content when scrolling down and hover on the body section. The box-shadow values are set to make the content hidden and only the nav header appears as visible. The header has position: fixed;
Question:
I was wondering if it's possible to make my content still be as hidden when the browser is open (just at the moment of opening, but unhide it when scrolled on the body section. If so, where could I apply the box-shadow property or is there a better way to do it? My knowledge is limited but so I'm looking for ways.
Code
window.addEventListener("scroll", function() {
const header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 0);
})
/* experimental start */
.wrapper-nav {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
display: flex;
transition: 3s;
padding: 20px 40px;
justify-content: space-around;
background-color: goldenrod;
box-shadow: 0px 400px 300px 1000px;
color: blueviolet;
z-index: 1;
}
.wrapper-nav:hover {
box-shadow: none;
transition: 0.6s;
}
<header>
<nav>
<div class="container-nav">
<div class="wrapper-nav">
</div>
</div>
</nav>
</header>
<main>
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At impedit architecto, obcaecati eligendi, iste laborum est, nobis quibusdam magni ratione eum odio ut voluptatem quo adipisci repellendus? Consectetur, possimus perferendis.
</p>
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At impedit architecto, obcaecati eligendi, iste laborum est, nobis quibusdam magni ratione eum odio ut voluptatem quo adipisci repellendus? Consectetur, possimus perferendis.
</p>
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At impedit architecto, obcaecati eligendi, iste laborum est, nobis quibusdam magni ratione eum odio ut voluptatem quo adipisci repellendus? Consectetur, possimus perferendis.
</p>
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At impedit architecto, obcaecati eligendi, iste laborum est, nobis quibusdam magni ratione eum odio ut voluptatem quo adipisci repellendus? Consectetur, possimus perferendis.
</p>
</main>
Additional: Any improvements on how to write a better code or create a better inquiry on StackOverflow are welcome.
Thank you for your time.
Realized I need to change some CSS after receiving help. Thank you!
.wrapper-nav {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
display: flex;
transition: 2s;
padding: 20px 40px;
justify-content: space-around;
background-color: goldenrod;
}
.wrapper-nav:hover {
box-shadow: none;
transition: 2s;
box-shadow: 0px 400px 300px 1000px;
color: blueviolet;
z-index: 1;
}
Welcome!
const main= document.querySelector("main");
window.addEventListener("scroll", function() {
const header = document.querySelector("header");
main.style.boxshadow=none;
header.classList.toggle("sticky", window.scrollY > 0);
})
window.addEventListener("DOMContentLoaded"),function(){
main.style.boxshadow= 0px 400px 300px 1000px;
}
Due to short time, I didn't run it but tried to answer the question on DOMload event the content is hidden on scroll I change the style to none to make it visible.

How do I fix red and green blocks with CSS ?

everyone
Would like to ask at present I am making a version when the web page to slide up the red and green block to be fixed, only the yellow block can slide!
The current treatment on the green side is using
position:sticky;
right:0px;
top:100px;
The grammar keeps him fixed there, but there's a problem because if you don't give height it looks like it's position:sticky; I want his height to be customizable, so I give him a height of 200px; As a result, when the content is too much or in RWD mode, it goes out of the green zone.
Is there a better way to fix the red and green blocks?
Here's what I'm trying to do so far.
https://codepen.io/hong-wei/pen/wvgbbye?editors=1100
Add align-items: flex-start; to your .container class and remove any height value from the aside.
.wrap{
background-color: #ccc;
line-height: 1.5;
}
.header{
position: fixed;
width: 100%;
background-color: #f75454;
box-shadow:0px 1px 30px #212529;
z-index: 1;
}
.header .list{
display: flex;
padding:20px;
justify-content:space-between;
}
.container{
display: flex;
padding:30px;
padding-top: 100px;
background-color: #5c5c5c;
align-items: flex-start;
}
.main{
flex:2;
padding:20px;
height: 1600px;
margin:0px 20px;
background-color: #f9cf5a;
}
.aside{
position:sticky;
right:0px;
top:100px;
padding:20px;
flex:1;
width: 100%;
background-color: #1ba784;
color:#eef7f2;
}
<div class="wrap">
<div class="header">
<ul class="list">
<li>測試</li>
<li>測試</li>
</ul>
</div>
<div class="container">
<div class="main">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum expedita pariatur facere repellat nobis sed modi, porro, at numquam accusantium aut consequuntur delectus ducimus atque officia dolores! Dolore quas delectus fuga accusantium quia atque esse, non, aut quae optio officia odit natus accusamus, libero iure nam? Accusantium veritatis ad repellat.</p>
</div>
<div class="aside">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda officiis sunt laboriosam impedit fuga tenetur pariatur distinctio ipsum suscipit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda officiis sunt laboriosam impedit fuga tenetur pariatur distinctio ipsum suscipit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda officiis sunt laboriosam impedit fuga tenetur pariatur distinctio ipsum suscipit.</p>
</div>
</div>
</div>

Background "Jumps" on revealing sidebar with content

I am trying to make a sidebar that reveals on pressing a button.
Everything works fine until I put some content in the sidebar. The background jumps when the sidebar is revealed.
Here is sample code:
document.getElementById('btn').addEventListener('click', ()=>{
let sidebar = document.getElementById('sidebar');
sidebar.style.width = '40vw';
let p = document.querySelector('#sidebar p');
p.style.display = 'block';
})
*{
margin: 0;
padding: 0;
}
#main{
display: flex;
}
#sec1{
width: 60vw;
height: 100vh;
background: red;
}
#sec2{
width: 40vw;
height: 100vh;
background-color: #bdd9d4;
}
#sidebar{
width: 0;
height: 100vh;
position: absolute;
top: 0;
right:0;
z-index: 1;
transition: width .5s;
background: green;
}
#sidebar p{
display: none;
}
<div id="main">
<div id="sec1">
<button id="btn">Open Sidebar</button>
</div>
<div id="sec2">
</div>
</div>
<div id="sidebar">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam sapiente amet similique? Architecto dolor, nulla neque natus incidunt labore dignissimos? Mollitia reprehenderit rerum unde iusto, consequatur explicabo molestiae cumque vero!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit doloremque sit delectus exercitationem reiciendis? Sunt, dolore ut cum, quod aliquam porro et similique, deleniti voluptatum neque maiores sed! Optio, fugit ipsam sequi quae incidunt pariatur hic deleniti! Eos atque vel praesentium delectus necessitatibus illo, iste officia modi nobis, est voluptatem sequi a quo quae quidem labore architecto magni aspernatur? Doloremque, libero fugiat accusantium asperiores aspernatur officiis numquam velit ullam dolore aliquam vitae tenetur, eaque vel deleniti! Eum magni officiis nihil?</p>
</div>
How do I stop the Jump without removing the content?
I also tried playing with variations of display and visibility to hide the elements.
As stated in the previous answers, your content jumps because you are animating the width of the container. The content (text) within it, will always try to fit, and this is why your have this effect.
In order to prevent this, do not animate the width, but animate the position.
#sidebar{
width: 0;
height: 100vh;
position: absolute;
top: 0;
right:0;
z-index: 1;
transition: transform .5s; /* modified */
background: green;
transform: translateX(120%); /* added */
}
#sidebar.showSidebar {
transform: translateX(0);
}
Remove this part from your code:
#sidebar p{
display: none; /* need to remove this from your code */
}
You might also need to add overflow-x: hidden to the Parent Element of your sidebar (in this case, the <body>), if horizontal scrollbars appear.
And this is the only JS required:
document.getElementById('btn').addEventListener('click', function(){
document.getElementById('sidebar').classList.add('showSidebar');
});
To hide the .sidebar again, you just need to remove the .showSidebar class :
document.getElementById('sidebar').classList.remove('showSidebar');
Using transform: translate() within CSS transitions is more efficient than using 'width' or 'right', as it doesn't cause layout/reflow (recalculation of the whole elements' size and/or position). It, along with opacity, are the only two transitionable properties that only affect the 'composition' part of the rendering of the webpage.
high-performance-animations article - the exact same principles apply to transitions also.
The "jump" is caused by the fact that when you click on the button, the offset width of your text can't really fit in the div that is growing. In other words, there is an instant, where the div that contains the text is something like 1px while your text is really bigger. So, there is many solutions including:
Hide the text overflow (it may work but the text will still "dance" while the div is growing)
I was thinking of something like :
#sidebar p{
display: none;
overflow: hidden;
}
Put a delay before displaying the text so the div will have enough time to be wide enough for the text :)
document.getElementById('btn').addEventListener('click', ()=>{
let sidebar = document.getElementById('sidebar');
sidebar.style.width = '40vw';
let div = document.querySelector('#sidebar div');
let text = div.children[0].innerText;
div.children[0].innerText = "";
div.style.display = 'block';
setTimeout(()=>{
div.children[0].innerText = text;
}, 500)
})
*{
margin: 0;
padding: 0;
}
#main{
display: flex;
}
#sec1{
width: 60vw;
height: 100vh;
background: red;
}
#sec2{
width: 40vw;
height: 100vh;
background-color: #bdd9d4;
}
#sidebar{
width: 0;
height: 100vh;
position: absolute;
top: 0;
right:0;
z-index: 1;
transition: width .5s;
background: green;
}
#sidebar div{
display: none;
}
<div id="main">
<div id="sec1">
<button id="btn">Open Sidebar</button>
</div>
<div id="sec2">
</div>
</div>
<div id="sidebar">
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam sapiente amet similique? Architecto dolor, nulla neque natus incidunt labore dignissimos? Mollitia reprehenderit rerum unde iusto, consequatur explicabo molestiae cumque vero!</p>
</div>
</div>
I've got a much more elegant solution than my previous attempt which I deleted as it caused an unwanted scrollbar. Simply add a child DIV for the sidebar contents with a fixed width and put overflow hidden on the sidebar. The sidebar can grow in width revealing the fixed width content which is hidden by the overflow. Any good?
document.getElementById('btn').addEventListener('click', ()=>{
let sidebar = document.getElementById('sidebar');
sidebar.style.width = '40vw';
let p = document.querySelector('#sidebar p');
p.style.display = 'block';
})
*{
margin: 0;
padding: 0;
}
#main{
display: flex;
}
#sec1{
width: 60vw;
height: 100vh;
background: red;
}
#sec2{
width: 40vw;
height: 100vh;
background-color: #bdd9d4;
}
#sidebar{
width: 0;
height: 100vh;
position: absolute;
overflow: hidden;
top: 0;
right:0;
z-index: 1;
transition: width .5s;
background: green;
}
#sidebar-contents {
width: 40vw;
}
#sidebar p{
display: none;
}
<div id="main">
<div id="sec1">
<button id="btn">Open Sidebar</button>
</div>
<div id="sec2">
</div>
</div>
<div id="sidebar">
<div id="sidebar-contents">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam sapiente amet similique? Architecto dolor, nulla neque natus incidunt labore dignissimos? Mollitia reprehenderit rerum unde iusto, consequatur explicabo molestiae cumque vero!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit doloremque sit delectus exercitationem reiciendis? Sunt, dolore ut cum, quod aliquam porro et similique, deleniti voluptatum neque maiores sed! Optio, fugit ipsam sequi quae incidunt pariatur hic deleniti! Eos atque vel praesentium delectus necessitatibus illo, iste officia modi nobis, est voluptatem sequi a quo quae quidem labore architecto magni aspernatur? Doloremque, libero fugiat accusantium asperiores aspernatur officiis numquam velit ullam dolore aliquam vitae tenetur, eaque vel deleniti! Eum magni officiis nihil?</p>
</div>
</div>

Text color gradient on the last line of an article

I have this code, which is an article with a toggle anchor "read more" and "read less", i want to add a gradiant color to the last line of the visible area of the article (before your press "read more" ).
This image may give you a clear idea :
There is the code:
$('.wrapper').find('a[href="#"]').on('click', function (e) {
e.preventDefault();
this.expand = !this.expand;
$(this).text(this.expand?"Read less":"Read more");
$(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
});
.small {
height: 50px;
width: 255px;
overflow:hidden;
}
.big {
height: auto;
width: 255px;
}
<script
src="https://code.jquery.com/jquery-1.9.1.min.js"
integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="
crossorigin="anonymous">
</script>
<div class="wrapper">
<div class="small">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta aut dolores autem officia eveniet, earum, necessitatibus et, in ut dolorum optio id hic numquam repudiandae? Quos expedita aliquam nobis adipisci?.</p>
</div>
Read more
</div>
Thank you.
You could achieve that effect with CSS only, making use of pseudo selectors and setting the background of the pseudo element. Something like the following will make that possible. You can play a bit with the positioning to your liking.
.small p
{
position: relative;
}
.small p:after
{
content: "";
display: block;
height: 25px;
width: 100%;
position: absolute;
bottom: 0;
background: rgba(240,248,255,0) linear-gradient(to top,#fff,rgba(255,255,255,0)) repeat scroll 0 0;
}
<div class="wrapper">
<div class="small">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta aut dolores autem officia eveniet, earum, necessitatibus et, in ut dolorum optio id hic numquam repudiandae? Quos expedita aliquam nobis adipisci?.</p>
</div> Read more
</div>
You could try using linear-gradient
$('.wrapper').find('a[href="#"]').on('click', function (e) {
e.preventDefault();
this.expand = !this.expand;
$(this).text(this.expand?"Read less":"Read more");
$(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
});
.small {
height: 50px;
width: 255px;
overflow:hidden;
background-image: linear-gradient(to bottom, #000, #000, #fff);
color:transparent;
-webkit-background-clip: text;
}
.big {
height: auto;
width: 255px;
}
<script
src="https://code.jquery.com/jquery-1.9.1.min.js"
integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="
crossorigin="anonymous">
</script>
<div class="wrapper">
<div class="small">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta aut dolores autem officia eveniet, earum, necessitatibus et, in ut dolorum optio id hic numquam repudiandae? Quos expedita aliquam nobis adipisci?.</p>
</div> Read more
</div>
Taking into account your example, this is my recommendation to solve your problem, there are several ways to do it, but an easy one without adding any additional HTML elements, would be to use the after pseudo selector
$('.wrapper').find('a[href="#"]').on('click', function (e) {
e.preventDefault();
this.expand = !this.expand;
$(this).text(this.expand?"Read less":"Read more");
$(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
});
.small {
height: 50px;
width: 255px;
overflow:hidden;
}
.small:after {
height: 1em;
width: 100%;
position: absolute;
top: calc(50px - 0.5em);
background: rgba(240,248,255,0) linear-gradient(to top,#fff,rgba(255,255,255,0)) repeat scroll 0 0;
content: '';
}
.big {
height: auto;
width: 255px;
}
<script
src="https://code.jquery.com/jquery-1.9.1.min.js"
integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="
crossorigin="anonymous">
</script>
<div class="wrapper">
<div class="small">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta aut dolores autem officia eveniet, earum, necessitatibus et, in ut dolorum optio id hic numquam repudiandae? Quos expedita aliquam nobis adipisci?.</p>
</div> Read more
</div>

Categories

Resources