I have a canvas which I want to be 100% screen width and at least 100% screen height, but more if the following div goes beyond the bottom of the screen.
I am filling the canvas using Trianglify.
var pattern = Trianglify({
cell_size: 25,
x_colors: 'Greens'
});
pattern.canvas(document.getElementById('container1'));
setInterval(function() {
// method to be executed;
var pattern = Trianglify({
cell_size: 25,
x_colors: 'Greens'
});
pattern.canvas(document.getElementById('container1'));
}, 1000);
canvas#container1 {
position: absolute;
width: 100vw;
min-height: 100vh;
}
.screen-container {
min-height: 100vh;
position: relative
}
.trianglify-container {
background-color: transparent;
color: #fff;
text-align: center;
padding-top: 20vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/1.0.1/trianglify.min.js"></script>
<canvas id="container1"></canvas>
<div class="screen-container trianglify-container">
<div class="container">
...
</div>
</div>
EDIT
The important thing for me is that the div immediately following the canvas needs to have the canvas covering all of it's background and cover at least 1 screen. It there is a different way to achieve this I'm happy to adapt my approach.
Is this result what you want?
-- Long content --
var pattern = Trianglify({
cell_size: 25,
x_colors: 'Greens'
});
pattern.canvas(document.getElementById('container1'));
setInterval(function() {
// method to be executed;
var pattern = Trianglify({
cell_size: 25,
x_colors: 'Greens'
});
pattern.canvas(document.getElementById('container1'));
}, 1000);
.outer-wrapper{
min-height: 100vh;
position: relative;
}
canvas#container1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.screen-container {
/*min-height: 100vh;*/
position: relative;
}
.trianglify-container {
background-color: transparent;
color: #fff;
text-align: center;
/*padding-top: 20vh;*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/1.0.1/trianglify.min.js"></script>
<div class="outer-wrapper">
<canvas id="container1"></canvas>
<div class="screen-container trianglify-container">
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper lacinia semper. Pellentesque dignissim tempus nisi sit amet porttitor. Sed laoreet, nisi eu auctor cursus, tellus turpis porta diam, ac fermentum enim odio auctor dolor. Duis in nunc rhoncus, vestibulum est at, fermentum ligula. Suspendisse dui dui, luctus id lacus eu, tempor venenatis sem. Ut pellentesque sodales turpis quis efficitur. Donec vulputate placerat orci, vitae porttitor nunc. Etiam risus nibh, porta porta libero in, tempor auctor dolor. Quisque id augue at dui egestas vulputate.
Praesent tristique eu urna non faucibus. Nunc leo urna, euismod in neque vitae, elementum consequat libero. Integer in dignissim nunc, id scelerisque metus. Etiam ut ipsum iaculis, ullamcorper eros nec, elementum odio. Donec ornare lorem a semper porttitor. Suspendisse tincidunt mauris nec dui rhoncus, in semper augue blandit. Integer laoreet, velit sed molestie malesuada, enim quam mollis sapien, ullamcorper sollicitudin mi mi non urna. Mauris eu dignissim lectus.
Aliquam lacus tortor, dictum quis pulvinar volutpat, tincidunt id leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce fermentum aliquam neque vitae bibendum. Nulla volutpat luctus urna et faucibus. Fusce convallis nulla tortor, vel ornare ante scelerisque in. Vivamus justo odio, porta nec vulputate ut, volutpat quis ipsum. Praesent id volutpat justo, sit amet euismod dui. In eget erat massa. Aliquam ultrices egestas ipsum, ac tincidunt diam gravida ac. Nullam tortor dui, viverra scelerisque vehicula varius, luctus in ipsum. Nulla dolor est, mattis in pellentesque at, interdum ac nibh.
Ut bibendum tellus varius orci aliquet luctus. Duis tortor nisl, suscipit at ornare ut, scelerisque nec dolor. Ut efficitur facilisis nulla a rutrum. Donec ut sodales odio, sed venenatis leo. Ut scelerisque eros in gravida fringilla. Aliquam fringilla vitae orci sed tincidunt. Aenean efficitur nibh elit, id sollicitudin enim mattis ut.
Praesent hendrerit ex eget quam ultrices, eget iaculis nunc pellentesque. In in orci interdum sapien bibendum sagittis. Mauris at massa quis nisi commodo facilisis at vel ligula. Vestibulum vitae aliquet lorem, vel faucibus lacus. Integer tortor nulla, rutrum dictum elit a, iaculis scelerisque nulla. Suspendisse massa eros, cursus quis enim a, volutpat aliquam quam. Fusce tristique tortor id laoreet blandit. Donec laoreet enim felis, consequat faucibus ante auctor vitae. Duis sollicitudin euismod dolor, in accumsan ipsum. Mauris tempus ligula nec nisl ornare dictum. Quisque luctus dolor magna. Maecenas et neque eu mi pellentesque maximus eu sit amet purus. Fusce eu porta tellus.
</div>
</div>
</div>
-- Same code, this time with a shorter content --
var pattern = Trianglify({
cell_size: 25,
x_colors: 'Greens'
});
pattern.canvas(document.getElementById('container1'));
setInterval(function() {
// method to be executed;
var pattern = Trianglify({
cell_size: 25,
x_colors: 'Greens'
});
pattern.canvas(document.getElementById('container1'));
}, 1000);
I just wraped them both inside a wrapper div that has `min-height: 100%`. The wrapper div will expand with the content if it get longers, while the canvas always fill the wrapper div.
.outer-wrapper{
min-height: 100vh;
position: relative;
}
canvas#container1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.screen-container {
/*min-height: 100vh;*/
position: relative;
}
.trianglify-container {
background-color: transparent;
color: #fff;
text-align: center;
/*padding-top: 20vh;*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/1.0.1/trianglify.min.js"></script>
<div class="outer-wrapper">
<canvas id="container1"></canvas>
<div class="screen-container trianglify-container">
<div class="container">
Short content
</div>
</div>
</div>
https://jsfiddle.net/hbe5j4m9/4/
Like this?
I Updated the .screen-container to contain the height of the canvas
.screen-container {
min-height: 100%;
position: relative
}
Related
I would like to have the red "Aliquam" text inside of the div with class ".absolute" track on top of the exact position of the (blue) "Aliquam" text inside ".aliquam-span", including on browser resize.
I've tried a few different ways to do this but haven't had much luck - hoping that someone here can help.
Nesting the text as a child of the span is not an option, unfortunately.
Thank you!
let aliquam = document.querySelector('.aliquam-span')
let aliquamAbsolute = document.querySelector('.red-text')
let aliquamRect = aliquam.getBoundingClientRect()
let aliquamAbsoluteRect = aliquamAbsolute.getBoundingClientRect()
let xOffset = aliquamRect.left - aliquamAbsoluteRect.left
let yOffset = aliquamRect.top - aliquamAbsoluteRect.top
console.log({xOffset})
aliquamAbsolute.style.left = `${xOffset}px`
aliquamAbsolute.style.top = `${yOffset}px`
.container {
width: 100%;
max-width: 60rem;
margin-left: auto;
margin-right: auto;
}
p {
font-size: 1.5rem;
}
.wrap {
position: relative;
}
.absolute {
position: absolute;
inset: 0;
}
.red-text {
position: relative;
color: red;
left: '200px';
}
.aliquam-span {
color: blue;
}
<div class="container">
<div class="wrap">
<p>Maecenas a finibus sapien. Duis pulvinar ligula vel arcu cursus, in euismod nunc iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce facilisis quis libero nec bibendum. Donec suscipit eros sit amet ex condimentum ullamcorper. Aliquam dictum, risus id pharetra congue, nisl nisi facilisis enim, sit amet facilisis nunc diam condimentum eros. Aenean euismod turpis id enim commodo sagittis. <span class="aliquam-span">Aliquam</span> eget dolor eget nulla tempus imperdiet. Praesent gravida, nisl quis malesuada faucibus, orci purus ultrices velit, ut porttitor libero ante at nisl. Duis eget convallis risus. Nunc vitae orci non tellus ultricies vestibulum in a augue. Vestibulum hendrerit leo ac nunc rutrum imperdiet. Integer sem tellus, maximus vel interdum ut, accumsan vel orci. Mauris maximus leo vitae felis dapibus euismod. Nulla facilisi. Donec ac ullamcorper justo.</p>
<div class="absolute">
<p class="red-text">Aliquam</p>
</div>
</div>
</div>
It works for me, try it:
function changePosition () {
let aliquam = document.querySelector('.aliquam-span');
let aliquamAbsolute = document.querySelector('.red-text').parentElement;
let aliquamRect = aliquam.getBoundingClientRect();
aliquamAbsolute.style.top = aliquamRect.top + 'px';
aliquamAbsolute.style.right = aliquamRect.right + 'px';
aliquamAbsolute.style.left = aliquamRect.left + 'px';
aliquamAbsolute.style.bottom = aliquamRect.bottom + 'px';
}
window.onresize = changePosition;
window.onload = changePosition;
.container {
width: 100%;
max-width: 60rem;
margin-left: auto;
margin-right: auto;
}
p {
font-size: 1.5rem;
}
.wrap {
}
.absolute {
position: absolute;
inset: 0;
}
.red-text {
position: relative;
color: red;
left: '200px';
margin: 0;
}
.aliquam-span {
color: blue;
}
<div class="container">
<div class="wrap">
<p>Maecenas a finibus sapien. Duis pulvinar ligula vel arcu cursus, in euismod nunc iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce facilisis quis libero nec bibendum. Donec suscipit eros sit amet ex condimentum ullamcorper. Aliquam dictum, risus id pharetra congue, nisl nisi facilisis enim, sit amet facilisis nunc diam condimentum eros. Aenean euismod turpis id enim commodo sagittis. <span class="aliquam-span">Aliquam</span> eget dolor eget nulla tempus imperdiet. Praesent gravida, nisl quis malesuada faucibus, orci purus ultrices velit, ut porttitor libero ante at nisl. Duis eget convallis risus. Nunc vitae orci non tellus ultricies vestibulum in a augue. Vestibulum hendrerit leo ac nunc rutrum imperdiet. Integer sem tellus, maximus vel interdum ut, accumsan vel orci. Mauris maximus leo vitae felis dapibus euismod. Nulla facilisi. Donec ac ullamcorper justo.</p>
<div class="absolute">
<p class="red-text">Aliquam</p>
</div>
</div>
</div>
You should target the div that is being set as the absolutely positioned one. So select .absolute instead of the .red-text.
let aliquam = document.querySelector('.aliquam-span')
let aliquamAbsolute = document.querySelector('.absolute')
let aliquamRect = aliquam.getBoundingClientRect()
let aliquamAbsoluteRect = aliquamAbsolute.getBoundingClientRect()
let xOffset = aliquamRect.left - aliquamAbsoluteRect.left
let yOffset = aliquamRect.top - aliquamAbsoluteRect.top
console.log({xOffset, yOffset})
aliquamAbsolute.style.left = `${xOffset}px`
aliquamAbsolute.style.top = `${yOffset}px`
.container {
width: 100%;
max-width: 60rem;
margin-left: auto;
margin-right: auto;
}
p {
font-size: 1.5rem;
}
.wrap {
position: relative;
}
.absolute {
position: absolute;
top: 0;
left: 0;
inset: 0;
}
.red-text {
color: red;
margin: 0;
}
.aliquam-span {
color: blue;
}
<div class="container">
<div class="wrap">
<p>Maecenas a finibus sapien. Duis pulvinar ligula vel arcu cursus, in euismod nunc iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce facilisis quis libero nec bibendum. Donec suscipit eros sit amet ex condimentum ullamcorper. Aliquam dictum, risus id pharetra congue, nisl nisi facilisis enim, sit amet facilisis nunc diam condimentum eros. Aenean euismod turpis id enim commodo sagittis. <span class="aliquam-span">Aliquam</span> eget dolor eget nulla tempus imperdiet. Praesent gravida, nisl quis malesuada faucibus, orci purus ultrices velit, ut porttitor libero ante at nisl. Duis eget convallis risus. Nunc vitae orci non tellus ultricies vestibulum in a augue. Vestibulum hendrerit leo ac nunc rutrum imperdiet. Integer sem tellus, maximus vel interdum ut, accumsan vel orci. Mauris maximus leo vitae felis dapibus euismod. Nulla facilisi. Donec ac ullamcorper justo.</p>
<div class="absolute">
<p class="red-text">Aliquam</p>
</div>
</div>
</div>
The folks at GSAP helped me out on this one!
Three different answers here:
https://greensock.com/forums/topic/35705-tracking-position-of-a-text-span-with-javascript/
I am creating a custom scrollbar with absolute positioned divs at the right(for vertical) and bottom(for horizontal).
When there is a border radius on parent, both scrollbars edge gets hidden.
Is there a way we can align the child elements based on border-radius of parent?
Like this:
Below is my html:
<div class=“content-container”>
<div class=“content”>SOME OVERFLOW CONTENT</div>
<div class=“scrollbar-y”>
<div class=“scrollbar-track”>
<div class=“scrollbar-thumb”></div>
</div>
</div>
</div>
Below is my css:
.content-container {
position: relative;
height: 400px;
width: 600px;
}
.content {
height: 100%;
width: 100%;
overflow: auto;
}
.scrollbar-y {
position: absolute;
top: 0;
right: 0;
height: 100%;
}
.scrollbar-track {
width: 16px;
height: 100%;
border: 4px;
background: transparent;
position: relative;
}
.scrollbar-thumb {
top: 0; // calculated based on scroll event
width: 8px;
background: grey;
height: 42px; // calculated based on clientHeight and scrollHeight
}
Here. You have to set height of "scrollbar-button".
.container {
overflow-y: auto;
max-height: 170px;
border: 1px solid #b9b9b9;
border-radius: 20px;
padding: 10px;
}
.container::-webkit-scrollbar {
width: 6px;
}
.container::-webkit-scrollbar-track {
background: #7070705e 0% 0% no-repeat padding-box;
border-radius: 100px;
}
.container::-webkit-scrollbar-button {
height: 14px;
}
.container::-webkit-scrollbar-thumb {
background: #707070 0% 0% no-repeat padding-box;
border-radius: 100px;
}
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu tellus elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut at erat in purus fermentum sodales. Nulla vel nunc vel metus interdum venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce tincidunt porttitor massa, in aliquam mauris vehicula id. In non volutpat velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc nisi dolor, viverra et efficitur ornare, lobortis vel velit. Integer volutpat, justo eleifend cursus pellentesque, lectus turpis fringilla elit, sit amet ultrices est magna ac leo. Sed dolor ipsum, bibendum ac viverra vel, vehicula ac quam. Sed eu justo vitae turpis vehicula interdum.
Cras ultricies leo eu aliquet ullamcorper. Pellentesque eu placerat velit. Sed sit amet gravida metus, nec auctor lectus. Donec blandit purus id est vehicula gravida. Aenean viverra enim id leo pretium, rhoncus mollis magna fringilla. Ut ullamcorper tempus urna id efficitur. Integer sit amet mattis nibh, ac sagittis diam. Morbi feugiat lacinia tortor nec dapibus. Pellentesque lobortis nec risus ac lacinia. Maecenas iaculis nisl nec lacus vehicula vulputate. Sed nec tortor id dui condimentum pulvinar. Donec nulla nisi, convallis at consectetur gravida, suscipit eu ante. In bibendum congue nisi, eget ullamcorper lectus bibendum in. Integer semper tortor elementum dui vestibulum tincidunt. Suspendisse potenti. Mauris vel velit vel felis fringilla dignissim.
Sed mauris nunc, auctor ac velit at, tempor sagittis diam. Nullam volutpat rutrum faucibus. Mauris ultrices tempor tempor. Mauris varius mauris sed viverra sollicitudin. Praesent nec eros sed enim consequat commodo. Donec id dui at nisi elementum condimentum. Nulla luctus lacus eu aliquam condimentum. Morbi vel dapibus massa. In nibh lectus, commodo vel elit in, sagittis varius elit. Donec in ex lorem. Vivamus id mattis dolor, nec finibus augue. Curabitur ut justo eu velit congue maximus. Maecenas non augue erat. Nam euismod leo ut enim dignissim, vitae semper dolor rhoncus.
</div>
Hello i am trying to make a wordpress menu sticky on scroll.
In practicality this is what i mean
http://dev.thegabrielmethod.com/ is the main menu which isnt sticky for now
https://www.thegabrielmethod.com/ this is how i want the menu to be on scroll, please check both links
This i what iv been able to do
http://dev.thegabrielmethod.com/gabriel/
using
.banner {
padding: 30px 50px;
}
.banner {
position: fixed;
width: 100%;
top: 0;
left: 0;
border-top: 0px solid #ffffff;
border-bottom: 0px solid #ffffff;
background: #fff;
vertical-align: top;
-webkit-box-shadow: 0px 4px 22px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 4px 22px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 4px 22px 0px rgba(50, 50, 50, 0.75);
z-index: 999999;
}
.nav-bar-below.op-page-header {
margin-top : 100px;
position: fixed;
width: 100%;
background: #155b9b;
background: -moz-linear-gradient(top,#155b9b 0%,#155b9b 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#155b9b),color-stop(100%,#155b9b));
background: -webkit-linear-gradient(top,#155b9b 0%,#155b9b 100%);
background: -o-linear-gradient(top,#155b9b 0%,#155b9b 100%);
background: -ms-linear-gradient(top,#155b9b 0%,#155b9b 100%);
background: linear-gradient(top,#155b9b 0%,#155b9b 100%));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#155b9b', endColorstr='#155b9b',GradientType=0 );
}
.op-page-header .navigation a {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 500;
font-size: 13px;
line-height: 19px;
text-shadow: 0 1px 1px rgba(249, 249, 249, 0), 0 1px 1px rgba(0,0,0,.5)!important;
text-rendering: optimizelegibility;
}
which does not give the kind of look on scroll as this
https://www.thegabrielmethod.com/
Can someone please help
Here's the working jsfiddle: https://jsfiddle.net/cyp8ngck/1/
Okay, so here's what i did.
I Created 2 different menus:
1. A normal menu that will be scrolled along with the page.
2. A sticky menu that will be displayed when the normal menu is scrolled outside the viewport and is no longer visible.
CSS for both menu types will is as follows:
/* common CSS styling for both menus to keep the code clean */
.menu, .sticky-menu {
display: block;
text-align: center;
font-size: 22px;
font-weight: bold;
background: #2e2e2e;
color: #ffffff;
padding: 15px 0px;
}
/* code for the sticky menu only */
.sticky-menu {
background: #cccccc;
color: #2e2e2e;
position: fixed;
z-index: 9999;
left:0;
right:0;
top:0;
transform: translateY(-100%);
transition: all .3s ease;
}
As you can see the sticky menu is pulled outside the viewport window and is kept hidden until the page is scrolled and the normal is hidden.
Now i just toggled this CSS class with the sticky menu:
(It pulls down and pulls up the Sticky Menu)
.pull-sticky-menu {
transform: translateY(0%);
transition: all .3s ease;
}
by detecting if the menu height in jQuery:
$(document).scroll(function() {
var scrollheight = $(this).scrollTop();
var menuheight = $(".menu").height();
if (scrollheight > menuheight) {
$('.sticky-menu').addClass("pull-sticky-menu");
} else {
$('.sticky-menu').removeClass("pull-sticky-menu");
}
});
Here's the code snippet:
$(document).scroll(function() {
var scrollheight = $(this).scrollTop();
var menuheight = $(".menu").height();
if (scrollheight > menuheight) {
$('.sticky-menu').addClass("pull-sticky-menu");
} else {
$('.sticky-menu').removeClass("pull-sticky-menu");
}
});
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 16px;
}
.container {
background: #ffffff;
}
.menu,
.sticky-menu {
display: block;
text-align: center;
font-size: 22px;
font-weight: bold;
background: #2e2e2e;
color: #ffffff;
padding: 15px 0px;
}
.sticky-menu {
background: #cccccc;
color: #2e2e2e;
position: fixed;
z-index: 9999;
left: 0;
right: 0;
top: 0;
transform: translateY(-100%);
transition: all .3s ease;
}
.pull-sticky-menu {
transform: translateY(0%);
transition: all .3s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="sticky-menu">
THIS IS STICKY MENU
</div>
<div class="menu">
THIS IS NORMAL MENU
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis accumsan massa, id scelerisque elit. Morbi vel arcu accumsan, facilisis magna quis, accumsan ex. Cras congue enim aliquam, accumsan nulla tincidunt, dapibus justo. Phasellus nec pellentesque
est. Morbi rutrum lectus libero, quis imperdiet turpis ultricies ut. Etiam pharetra dictum dui sit amet iaculis. Curabitur rhoncus gravida augue, dapibus semper nisl rutrum sed. Etiam facilisis lacus eget ullamcorper molestie. Duis vestibulum tortor
lorem, sed auctor tellus efficitur id.
</p>
<p>
Maecenas dapibus erat ac erat vehicula, nec iaculis dui faucibus. Mauris non gravida nunc. Duis eget leo sit amet sapien dictum tempus eu eget enim. Ut eu est vel nibh dictum malesuada in a metus. Sed finibus mollis ipsum, scelerisque maximus mauris blandit
non. Aenean vel urna nisl. Ut facilisis nibh dolor, non malesuada felis facilisis eu. Maecenas ut neque quis purus rutrum pharetra sed id mauris. Ut eu ex eu turpis tincidunt placerat accumsan sed elit. Duis egestas, lectus et euismod tempor, nunc
nibh convallis lectus, fringilla tincidunt odio augue a mauris. Aliquam ultrices arcu et orci laoreet, in congue magna gravida. Mauris posuere quis justo eu egestas.
</p>
<p>
Praesent vehicula venenatis felis vel semper. Aenean pharetra dictum augue, laoreet scelerisque leo euismod vel. Aliquam scelerisque eleifend eleifend. Pellentesque a felis quis diam fringilla cursus at ac nibh. Etiam tellus lectus, vehicula non risus
in, pellentesque tincidunt quam. Integer elit magna, euismod sit amet lorem quis, facilisis consectetur metus. Aliquam dictum ante quis laoreet congue. Morbi hendrerit posuere faucibus. Aliquam augue est, faucibus quis consequat in, pretium tincidunt
libero. Fusce vulputate aliquam turpis eu sollicitudin. Nam accumsan eget nulla ut molestie. Morbi turpis felis, egestas eget velit et, fringilla sodales est.
</p>
<p>
Duis vel velit quis metus efficitur luctus. Proin porttitor sapien eget diam fringilla mollis. Curabitur interdum efficitur enim, laoreet bibendum dui aliquet vitae. Etiam arcu ipsum, condimentum nec scelerisque vitae, ornare at justo. Duis eget tincidunt
sapien. Quisque non arcu volutpat, lacinia sem id, volutpat tellus. Vivamus dui lorem, aliquam non iaculis posuere, euismod et velit. Vestibulum nunc mauris, pharetra porta nisi eu, convallis molestie massa. Donec tincidunt tempus egestas. Sed lectus
sem, vestibulum at felis et, finibus egestas sem.
</p>
<p>
Nulla auctor, quam sed efficitur tempor, felis justo egestas justo, ac bibendum sem ante eu nisi. Aliquam erat volutpat. Suspendisse turpis ante, dapibus in purus et, aliquet rutrum arcu. Suspendisse sem massa, ultrices sed felis vel, mollis porta nisl.
Curabitur lectus urna, porta eu placerat id, tempor eget erat. Duis mattis eget nisi et bibendum. Aliquam nibh libero, elementum et leo nec, egestas vestibulum lacus. Suspendisse vel augue diam. Phasellus fermentum, quam sed euismod finibus, erat
ante fermentum mi, at ullamcorper nisi sapien quis orci. Morbi id sem tincidunt, semper eros non, facilisis velit. Nam tincidunt neque ullamcorper, tristique justo quis, dapibus nunc. In in pharetra enim.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis accumsan massa, id scelerisque elit. Morbi vel arcu accumsan, facilisis magna quis, accumsan ex. Cras congue enim aliquam, accumsan nulla tincidunt, dapibus justo. Phasellus nec pellentesque
est. Morbi rutrum lectus libero, quis imperdiet turpis ultricies ut. Etiam pharetra dictum dui sit amet iaculis. Curabitur rhoncus gravida augue, dapibus semper nisl rutrum sed. Etiam facilisis lacus eget ullamcorper molestie. Duis vestibulum tortor
lorem, sed auctor tellus efficitur id.
</p>
<p>
Maecenas dapibus erat ac erat vehicula, nec iaculis dui faucibus. Mauris non gravida nunc. Duis eget leo sit amet sapien dictum tempus eu eget enim. Ut eu est vel nibh dictum malesuada in a metus. Sed finibus mollis ipsum, scelerisque maximus mauris blandit
non. Aenean vel urna nisl. Ut facilisis nibh dolor, non malesuada felis facilisis eu. Maecenas ut neque quis purus rutrum pharetra sed id mauris. Ut eu ex eu turpis tincidunt placerat accumsan sed elit. Duis egestas, lectus et euismod tempor, nunc
nibh convallis lectus, fringilla tincidunt odio augue a mauris. Aliquam ultrices arcu et orci laoreet, in congue magna gravida. Mauris posuere quis justo eu egestas.
</p>
<p>
Praesent vehicula venenatis felis vel semper. Aenean pharetra dictum augue, laoreet scelerisque leo euismod vel. Aliquam scelerisque eleifend eleifend. Pellentesque a felis quis diam fringilla cursus at ac nibh. Etiam tellus lectus, vehicula non risus
in, pellentesque tincidunt quam. Integer elit magna, euismod sit amet lorem quis, facilisis consectetur metus. Aliquam dictum ante quis laoreet congue. Morbi hendrerit posuere faucibus. Aliquam augue est, faucibus quis consequat in, pretium tincidunt
libero. Fusce vulputate aliquam turpis eu sollicitudin. Nam accumsan eget nulla ut molestie. Morbi turpis felis, egestas eget velit et, fringilla sodales est.
</p>
<p>
Duis vel velit quis metus efficitur luctus. Proin porttitor sapien eget diam fringilla mollis. Curabitur interdum efficitur enim, laoreet bibendum dui aliquet vitae. Etiam arcu ipsum, condimentum nec scelerisque vitae, ornare at justo. Duis eget tincidunt
sapien. Quisque non arcu volutpat, lacinia sem id, volutpat tellus. Vivamus dui lorem, aliquam non iaculis posuere, euismod et velit. Vestibulum nunc mauris, pharetra porta nisi eu, convallis molestie massa. Donec tincidunt tempus egestas. Sed lectus
sem, vestibulum at felis et, finibus egestas sem.
</p>
<p>
Nulla auctor, quam sed efficitur tempor, felis justo egestas justo, ac bibendum sem ante eu nisi. Aliquam erat volutpat. Suspendisse turpis ante, dapibus in purus et, aliquet rutrum arcu. Suspendisse sem massa, ultrices sed felis vel, mollis porta nisl.
Curabitur lectus urna, porta eu placerat id, tempor eget erat. Duis mattis eget nisi et bibendum. Aliquam nibh libero, elementum et leo nec, egestas vestibulum lacus. Suspendisse vel augue diam. Phasellus fermentum, quam sed euismod finibus, erat
ante fermentum mi, at ullamcorper nisi sapien quis orci. Morbi id sem tincidunt, semper eros non, facilisis velit. Nam tincidunt neque ullamcorper, tristique justo quis, dapibus nunc. In in pharetra enim.
</p>
</div>
Let me know if this helps :)
I have a div that sticks once scrolled to top of the container - similar to this fiddle I found and have hacked (I appreciate the code is not great but is for the purposes of showing my issue).
I would like the next div to scroll over the previous div, and also stick once it hits the same position. At the minute, I can only get the div to continue scrolling behind, or 'jump', like what it is doing now.
I wish to achieve a scrolling set of divs that each fix at the top of the container, one after the other, on top of one another, rather than continuing to scroll beyond - this is the only option I can come up with so far.
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
$('#sticky-anchor').height($('#sticky').outerHeight());
} else {
$('#sticky').removeClass('stick');
$('#sticky-anchor').height(0);
}
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky1').addClass('stick');
$('#sticky-anchor').height($('#sticky1').outerHeight());
} else {
$('#sticky1').removeClass('stick');
$('#sticky-anchor').height(0);
}
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
#sticky,
#sticky1 {
padding: 0.5ex;
width: 400px;
background-color: #333;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
}
#sticky.stick {
margin-top: 0 !important;
position: fixed;
top: 0;
z-index: 1;
border-radius: 0 0 0.5em 0.5em;
}
#sticky1.stick {
margin-top: 0 !important;
position: fixed;
top: 0;
z-index: 2;
border-radius: 0 0 0.5em 0.5em;
}
body {
margin: 1em;
}
p {
margin: 1em auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sticky-anchor"></div>
<div id="sticky">This will stay at top of page</div>
<p>...</p>
<div id="sticky-anchor"></div>
<div id="sticky1">This should continue to scroll and stick on top
</div>
<p>...</p>
How about this? Should be at least a start.
https://jsfiddle.net/mqf7h5dz/
HTML:
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top;
$('.sticky').each(function() {
//$(this).find(".scrolling").width( width * imgLength * 1.2 );
div_top = $(this).offset().top;
console.log("Top for this div: ", div_top);
if (window_top > div_top) {
$(this).removeClass('sticky');
$(this).addClass('sticked');
//$(this).height($('.sticky').outerHeight());
$(this).clone().appendTo($('#sticky_container'));
}
});
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
.sticky {
padding: 0.5ex;
width: 400px;
background-color: #333;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
}
.sticky-header {
padding: 0.5ex;
width: 400px;
background-color: #333;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
}
#sticky_container {
position: fixed;
top: 0;
}
.sticky.stick {
margin-top: 0 !important;
position: fixed;
top: 0;
z-index: 1;
border-radius: 0 0 0.5em 0.5em;
background: red;
}
body {
margin: 1em;
}
p {
margin: 1em auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sticky_container"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque, lectus in pharetra blandit, augue mauris pulvinar erat, ut euismod nibh lectus sed diam. Nulla fringilla ultrices ligula. Aliquam vitae felis metus. Maecenas lacinia bibendum
accumsan. Curabitur lobortis convallis purus non imperdiet. Morbi ut vulputate mauris. Curabitur lacinia faucibus volutpat. Nulla elit tortor, rhoncus ut luctus eget, blandit in risus. Integer accumsan ullamcorper lorem id porttitor. Aliquam vitae
</p>
<div class="sticky-anchor"></div>
<div class="sticky sticky-header">This will stay at top of page</div>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor, justo at ornare bibendum, magna lectus cursus felis, tristique consectetur arcu justo at augue.
Mauris ultrices mollis sem eget elementum. Sed ipsum orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis aliquam pulvinar nisl, vitae congue velit ultricies
eget.
</p>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor, justo at ornare bibendum, magna lectus cursus felis, tristique consectetur arcu justo at augue.
Mauris ultrices mollis sem eget elementum. Sed ipsum orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis aliquam pulvinar nisl, vitae congue velit ultricies
eget.
</p>
<div class="sticky-anchor"></div>
<div class="sticky sticky-header">This should continue to scroll and stick on top
</div>
<p>
Phasellus malesuada euismod lectus nec bibendum. Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus tempor accumsan urna eu faucibus.
Duis sed ligula neque, pulvinar euismod velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. Pellentesque accumsan pulvinar odio, id adipiscing diam mollis
eu. Nulla id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci enim egestas arcu,
sit amet sodales risus leo quis nisi.</p>
<p>
Phasellus malesuada euismod lectus nec bibendum. Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus tempor accumsan urna eu faucibus.
Duis sed ligula neque, pulvinar euismod velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. Pellentesque accumsan pulvinar odio, id adipiscing diam mollis
eu. Nulla id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci enim egestas arcu,
sit amet sodales risus leo quis nisi.</p>
<p>
Phasellus malesuada euismod lectus nec bibendum. Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus tempor accumsan urna eu faucibus.
Duis sed ligula neque, pulvinar euismod velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. Pellentesque accumsan pulvinar odio, id adipiscing diam mollis
eu. Nulla id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci enim egestas arcu,
sit amet sodales risus leo quis nisi.</p>
I would like to display a div after the user presses a button on a web page. I want the div to zoom inwards from the center of the screen. I'd like to achieve an effect similar to that in iCloud for creating a new document. How could such an effect be achieved?
The content of the div will be static and scrollable, it will consist of a toolbar with a button very similar to the element on iCloud.
If possible, a pure JavaScript solution would be awesome, but I'm open to using jQuery.
This is a Vanilla JS solution as the OP requested.
The reason there are no fallbacks is to make the snippet smaller.
document.addEventListener('DOMContentLoaded', function() {
var toggle = document.getElementById('toggle'),
window = document.getElementById('window');
toggle.addEventListener('click', function() {
window.classList.toggle('opened');
});
close.addEventListener('click', function() {
window.classList.remove('opened');
});
});
#toggle {cursor: pointer;}
#container {
width: 95vw;
height: 95vh;
background: blue;
overflow: auto;
}
#window {
width: 80vw;
height: 80vh;
background: red;
position: fixed;
top: 10vh;
left: 10vw;
opacity: 0;
z-index: 100;
overflow: auto;
transform: scale(0, 0);
transition-property: opacity, transform;
transition-duration: 1s;
}
#window.opened {
display: block;
transform: scale(1, 1);
opacity: 1;
}
<div id="container">
<button id="toggle">Open & Close the window</button>
<div id="window">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat lorem, consequat eu feugiat ultrices, condimentum scelerisque nulla. Mauris auctor ipsum justo, at blandit lorem pellentesque a. Nunc vel est luctus, vehicula risus id, tempor nulla.
Aenean laoreet nunc dolor, sed feugiat metus tincidunt at. Quisque elementum suscipit enim, vitae ultrices est aliquam id. Quisque cursus tortor sit amet fringilla dapibus. Aliquam interdum a turpis dictum lacinia. Duis risus massa, feugiat quis
nibh eget, iaculis cursus purus. Nam ullamcorper in erat quis cursus. Proin nec ornare lectus, at dignissim sem. Sed blandit accumsan dui, a sagittis arcu iaculis a. Maecenas nibh ante, accumsan in enim et, mollis egestas ipsum. Sed convallis vitae
nibh ut aliquet. Ut ullamcorper ullamcorper enim vitae pulvinar. Donec vitae tincidunt felis. Ut felis lacus, cursus vel rutrum ut, maximus sed metus. Aenean nisl nulla, maximus ut facilisis a, tristique eu quam. Pellentesque venenatis massa quis
eros luctus tempor. Praesent quis quam non tortor imperdiet auctor nec in nunc. Vivamus odio tellus, placerat porta urna vitae, congue tincidunt urna. Nulla auctor pretium venenatis. Fusce non nisi nunc. Morbi pretium malesuada enim, vitae cursus
dolor convallis et. Nam nibh eros, sollicitudin sed tristique nec, pulvinar condimentum nunc. Nulla facilisi. Aenean egestas velit dui, vel dignissim enim suscipit euismod. Donec euismod eleifend mi ut pharetra. Sed ac risus quam. Nullam libero
diam, tempus sit amet convallis ut, bibendum viverra sapien. Aliquam tellus ligula, egestas ac dictum ut, efficitur eget eros. Sed tempus sem erat, eget efficitur magna tempor ac. Curabitur hendrerit molestie orci, at venenatis enim luctus porta.
Vivamus varius ligula eu dui dictum, ac venenatis libero euismod. Sed consectetur nibh in metus tristique, vitae fringilla mauris eleifend. Aenean et rhoncus nunc. Sed eget eros neque. Donec pretium interdum risus, sed cursus nulla euismod sagittis.
Nam eu ultricies mi, id auctor leo. Quisque dictum urna eu dictum feugiat. Donec fermentum mi sed diam posuere luctus. In lacinia, leo nec ornare tristique, mauris arcu lobortis elit, sed euismod purus lacus ut nibh. Integer fringilla felis ac augue
lobortis, ut commodo libero imperdiet. Aenean at metus vel ligula porttitor varius sed sit amet dolor. Aenean sodales nisl nec urna tristique elementum. Maecenas blandit efficitur massa et congue. Mauris nec tortor felis. Ut vulputate maximus massa,
sed commodo odio laoreet vel. Sed eu laoreet urna. Cras id pellentesque augue. Vestibulum finibus leo non lectus rhoncus vehicula. Mauris dignissim venenatis sem, quis pellentesque risus posuere blandit. Sed lorem enim, pretium vitae felis sed,
tincidunt semper ipsum. Vivamus non ex tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>
</div>
The following is javascript only solution, without Jquery.
CSS For the centered div for both vertical and horizontal:
<style>
#panel{
display:none;
width: 1%;
height: 1%;
background-color: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
The Javascript:
<script>
var i = 30;
function show(){
panel = document.getElementById('panel');
panel.style.display = 'block';
setTimeout(function(){change(panel)}, 10);
}
function change(panel){
panel.style.width = i+"%"
panel.style.height = i+"%"
i++
if (i < 90) show()
}
</script>
The Demo: http://jsbin.com/madaku