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 :)
Related
I'm trying to make it so this first section of my page will fit the whole browser, but I also want it to be responsive. The problem I have right now is that when I resize the browser, the text or some things may get cut off.
In the photo, you can see some of the text is cut off, but I don't want it to get cut off.
Basically, what I'm trying to do is make the top section fit the whole browser for any size, but also the content inside must be responsive as well.
Here is a JSFiddle
#import url('https://fonts.googleapis.com/css?family=Asap');
body, html
{
background-color: #598392;
margin: 0;
padding: 0;
font-family: 'Asap', sans-serif;
height:100%;
}
.menuIcon
{
padding:20px;
display:none;
cursor:pointer;
}
.navigationBar
{
background-color: #124559;
width:100%;
overflow:hidden;
position:fixed;
}
.title
{
overflow:hidden;
height:100vh;
}
.navigationBar li
{
padding:20px;
display: inline;
list-style-type:none;
}
a
{
color: #EFF6E0;
text-decoration: none;
}
a:hover
{
color: #AEC3B0;
}
nav ul
{
padding: 20px;
margin: 0;
transition: max-height 1s;
}
.title h1
{
padding: 75px 0 0 20px;
}
.title article
{
padding: 20px;
}
.show
{
display:block;
}
#media only screen and (max-width: 768px)
{
.menuIcon
{
display:block;
}
.navigationBar
{opacity: 0.9;}
.navigationBar li
{
display:block;
padding: 10px;
text-align: center;
}
nav ul
{
max-height: 0;
padding: 0px;
}
.show
{
max-height: 200px;
}
.title article
{
padding: 20px;
}
}
/*
#media only screen and (min-width: 768px)
{
nav ul
{
display: block !important;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link rel = "stylesheet" type ="text/css" href = "nav.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<nav class = "navigationBar">
<img src = "https://i.imgur.com/nfbKl0W.png" class = "menuIcon">
<ul class = "linkBar">
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li>Media</li>
<li>Miscellaneous</li>
</ul>
</nav>
<section class = "title">
<h1>Welcome</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis vitae magna quis lacinia. Donec felis velit, consequat at nisi quis, sollicitudin scelerisque quam. Proin metus sapien, lobortis ac lacus a, maximus porttitor magna. Praesent pellentesque felis a consequat semper. Sed commodo gravida elit sit amet interdum. Suspendisse felis tellus, consequat vel varius eu, tincidunt eu elit. Quisque porttitor ultricies risus, at accumsan diam vehicula in. Aliquam sit amet arcu nec dui pretium viverra et eget ipsum. Mauris id diam sem. Etiam pellentesque eleifend odio non sagittis. Phasellus eleifend felis et convallis mollis. Donec eget diam nisl. Nam non molestie mi. Suspendisse vitae efficitur nisl. In ac urna at mi ultrices commodo.
</article>
<article>
Vestibulum quis porttitor nisl, eget tincidunt ante. Ut ac fringilla nulla. Donec cursus est semper sodales mollis. In pellentesque elementum porttitor. Curabitur aliquet velit risus, sed blandit nisl luctus cursus. Vivamus sem massa, cursus vitae ipsum fringilla, feugiat porta tellus. Fusce ac ornare nisi. Maecenas metus nibh, tincidunt vel sem vel, iaculis pharetra sem. Aenean dolor nisl, porta sit amet rutrum et, posuere nec nibh. Pellentesque ante nisi, molestie dignissim porttitor sit amet, dignissim ut magna.
</article>
<article>
Vestibulum congue finibus felis suscipit pellentesque. Nunc pulvinar neque a ipsum molestie, condimentum congue urna hendrerit. Morbi egestas ac velit quis tincidunt. Donec consectetur finibus dui a consequat. Sed varius diam ut dui viverra, a pellentesque nunc molestie. Nullam tristique iaculis nibh, non posuere nunc scelerisque eu. Suspendisse dictum velit et felis lacinia ullamcorper.
</article>
<article>
Suspendisse purus ipsum, fermentum ultricies nisl eu, condimentum luctus sem. In bibendum tristique elit, at luctus sem interdum porta. Suspendisse potenti. Cras id tellus at felis egestas pharetra ut eget massa. Aliquam sed euismod dolor. Vestibulum convallis sem vel rhoncus tincidunt. Nunc at dictum purus, sed imperdiet tellus. Suspendisse at justo quis ligula blandit euismod a eget urna. Maecenas quis ligula eget leo iaculis mattis. In et varius tellus. Quisque lacinia magna mi, nec molestie felis condimentum non. Nunc laoreet sem sit amet massa ultrices auctor. Aliquam a convallis lectus, ut sagittis massa.
</article>
<article>
Nullam feugiat porttitor luctus. Vivamus ac imperdiet dui, in venenatis sapien. Maecenas faucibus nunc a ex hendrerit hendrerit eget at nisi. Praesent tempor dictum nulla. Nam mattis fringilla fermentum. Vestibulum iaculis, velit nec viverra consectetur, tellus leo eleifend quam, vel venenatis urna eros nec ipsum. Curabitur lobortis venenatis mauris eu viverra. Donec vel condimentum neque. Aenean molestie lectus a ante facilisis tincidunt. Cras urna purus, porta a lacinia in, varius quis leo. Fusce ligula velit, dapibus non dui nec, pharetra scelerisque nunc. Aliquam ut mattis leo. Maecenas vitae porttitor risus. Nunc euismod viverra condimentum. Aliquam sagittis, nibh quis rutrum tincidunt, purus ligula rhoncus quam, egestas semper nunc ante non mi. Aliquam eget enim aliquet, laoreet leo sit amet, finibus lorem.
</article>
</section>
<section class = "about" id = "about">
<h1>About</h1>
<article>
Suspendisse purus ipsum, fermentum ultricies nisl eu, condimentum luctus sem. In bibendum tristique elit, at luctus sem interdum porta. Suspendisse potenti. Cras id tellus at felis egestas pharetra ut eget massa. Aliquam sed euismod dolor. Vestibulum convallis sem vel rhoncus tincidunt. Nunc at dictum purus, sed imperdiet tellus. Suspendisse at justo quis ligula blandit euismod a eget urna. Maecenas quis ligula eget leo iaculis mattis. In et varius tellus. Quisque lacinia magna mi, nec molestie felis condimentum non. Nunc laoreet sem sit amet massa ultrices auctor. Aliquam a convallis lectus, ut sagittis massa.
</article>
<article>
Nullam feugiat porttitor luctus. Vivamus ac imperdiet dui, in venenatis sapien. Maecenas faucibus nunc a ex hendrerit hendrerit eget at nisi. Praesent tempor dictum nulla. Nam mattis fringilla fermentum. Vestibulum iaculis, velit nec viverra consectetur, tellus leo eleifend quam, vel venenatis urna eros nec ipsum. Curabitur lobortis venenatis mauris eu viverra. Donec vel condimentum neque. Aenean molestie lectus a ante facilisis tincidunt. Cras urna purus, porta a lacinia in, varius quis leo. Fusce ligula velit, dapibus non dui nec, pharetra scelerisque nunc. Aliquam ut mattis leo. Maecenas vitae porttitor risus. Nunc euismod viverra condimentum. Aliquam sagittis, nibh quis rutrum tincidunt, purus ligula rhoncus quam, egestas semper nunc ante non mi. Aliquam eget enim aliquet, laoreet leo sit amet, finibus lorem.
</article>
</section>
<script>
$('.menuIcon').on('click', function() {
$('nav ul').toggleClass('show');
});
$('.aboutLink').on('click', function() {
$('html, body').animate({scrollTop: $('#about').offset().top}, 2000);
});
</script>
</body>
</html>
The text being cut off is due to the two css properties given to the title class
.title
{
overflow:hidden;
height:100vh;
}
100vh means the div will be 100% of the view (usually the browsers) height. As the text spans more lines due to the lines getting thinner, the text will start to overflow. As the overflow of the div is set to hidden the text will be cut off.
This could be considered a fixed height and it is recommended not to give fixed heights to div's with content.
If you remove these two lines of code the text will not be cut off. If you would like to keep the height on larger screens you could use the following code to ensure that the height does not drop under 100vh
min-height:100vh;
#import url('https://fonts.googleapis.com/css?family=Asap');
body, html
{
background-color: #598392;
margin: 0;
padding: 0;
font-family: 'Asap', sans-serif;
height:100%;
}
.menuIcon
{
padding:20px;
display:none;
cursor:pointer;
}
.navigationBar
{
background-color: #124559;
width:100%;
overflow:hidden;
position:fixed;
top: 0;
}
.navigationBar li
{
padding:20px;
display: inline;
list-style-type:none;
}
a
{
color: #EFF6E0;
text-decoration: none;
}
a:hover
{
color: #AEC3B0;
}
nav ul
{
padding: 20px;
margin: 0;
transition: max-height 1s;
}
section h1
{
padding: 75px 0 0 20px;
}
section article
{
padding: 20px;
}
.show
{
display:block;
}
#media only screen and (max-width: 768px)
{
.menuIcon
{
display:block;
}
.navigationBar
{opacity: 0.9;}
.navigationBar li
{
display:block;
padding: 10px;
text-align: center;
}
nav ul
{
max-height: 0;
padding: 0px;
}
.show
{
max-height: 200px;
}
.title article
{
padding: 20px;
}
}
/*
#media only screen and (min-width: 768px)
{
nav ul
{
display: block !important;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link rel = "stylesheet" type ="text/css" href = "nav.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<nav class = "navigationBar">
<img src = "https://i.imgur.com/nfbKl0W.png" class = "menuIcon">
<ul class = "linkBar">
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li>Media</li>
<li>Miscellaneous</li>
</ul>
</nav>
<section class = "title">
<h1>Welcome</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis vitae magna quis lacinia. Donec felis velit, consequat at nisi quis, sollicitudin scelerisque quam. Proin metus sapien, lobortis ac lacus a, maximus porttitor magna. Praesent pellentesque felis a consequat semper. Sed commodo gravida elit sit amet interdum. Suspendisse felis tellus, consequat vel varius eu, tincidunt eu elit. Quisque porttitor ultricies risus, at accumsan diam vehicula in. Aliquam sit amet arcu nec dui pretium viverra et eget ipsum. Mauris id diam sem. Etiam pellentesque eleifend odio non sagittis. Phasellus eleifend felis et convallis mollis. Donec eget diam nisl. Nam non molestie mi. Suspendisse vitae efficitur nisl. In ac urna at mi ultrices commodo.
</article>
<article>
Vestibulum quis porttitor nisl, eget tincidunt ante. Ut ac fringilla nulla. Donec cursus est semper sodales mollis. In pellentesque elementum porttitor. Curabitur aliquet velit risus, sed blandit nisl luctus cursus. Vivamus sem massa, cursus vitae ipsum fringilla, feugiat porta tellus. Fusce ac ornare nisi. Maecenas metus nibh, tincidunt vel sem vel, iaculis pharetra sem. Aenean dolor nisl, porta sit amet rutrum et, posuere nec nibh. Pellentesque ante nisi, molestie dignissim porttitor sit amet, dignissim ut magna.
</article>
<article>
Vestibulum congue finibus felis suscipit pellentesque. Nunc pulvinar neque a ipsum molestie, condimentum congue urna hendrerit. Morbi egestas ac velit quis tincidunt. Donec consectetur finibus dui a consequat. Sed varius diam ut dui viverra, a pellentesque nunc molestie. Nullam tristique iaculis nibh, non posuere nunc scelerisque eu. Suspendisse dictum velit et felis lacinia ullamcorper.
</article>
<article>
Suspendisse purus ipsum, fermentum ultricies nisl eu, condimentum luctus sem. In bibendum tristique elit, at luctus sem interdum porta. Suspendisse potenti. Cras id tellus at felis egestas pharetra ut eget massa. Aliquam sed euismod dolor. Vestibulum convallis sem vel rhoncus tincidunt. Nunc at dictum purus, sed imperdiet tellus. Suspendisse at justo quis ligula blandit euismod a eget urna. Maecenas quis ligula eget leo iaculis mattis. In et varius tellus. Quisque lacinia magna mi, nec molestie felis condimentum non. Nunc laoreet sem sit amet massa ultrices auctor. Aliquam a convallis lectus, ut sagittis massa.
</article>
<article>
Nullam feugiat porttitor luctus. Vivamus ac imperdiet dui, in venenatis sapien. Maecenas faucibus nunc a ex hendrerit hendrerit eget at nisi. Praesent tempor dictum nulla. Nam mattis fringilla fermentum. Vestibulum iaculis, velit nec viverra consectetur, tellus leo eleifend quam, vel venenatis urna eros nec ipsum. Curabitur lobortis venenatis mauris eu viverra. Donec vel condimentum neque. Aenean molestie lectus a ante facilisis tincidunt. Cras urna purus, porta a lacinia in, varius quis leo. Fusce ligula velit, dapibus non dui nec, pharetra scelerisque nunc. Aliquam ut mattis leo. Maecenas vitae porttitor risus. Nunc euismod viverra condimentum. Aliquam sagittis, nibh quis rutrum tincidunt, purus ligula rhoncus quam, egestas semper nunc ante non mi. Aliquam eget enim aliquet, laoreet leo sit amet, finibus lorem.
</article>
</section>
<section class = "about" id = "about">
<h1>About</h1>
<article>
Suspendisse purus ipsum, fermentum ultricies nisl eu, condimentum luctus sem. In bibendum tristique elit, at luctus sem interdum porta. Suspendisse potenti. Cras id tellus at felis egestas pharetra ut eget massa. Aliquam sed euismod dolor. Vestibulum convallis sem vel rhoncus tincidunt. Nunc at dictum purus, sed imperdiet tellus. Suspendisse at justo quis ligula blandit euismod a eget urna. Maecenas quis ligula eget leo iaculis mattis. In et varius tellus. Quisque lacinia magna mi, nec molestie felis condimentum non. Nunc laoreet sem sit amet massa ultrices auctor. Aliquam a convallis lectus, ut sagittis massa.
</article>
<article>
Nullam feugiat porttitor luctus. Vivamus ac imperdiet dui, in venenatis sapien. Maecenas faucibus nunc a ex hendrerit hendrerit eget at nisi. Praesent tempor dictum nulla. Nam mattis fringilla fermentum. Vestibulum iaculis, velit nec viverra consectetur, tellus leo eleifend quam, vel venenatis urna eros nec ipsum. Curabitur lobortis venenatis mauris eu viverra. Donec vel condimentum neque. Aenean molestie lectus a ante facilisis tincidunt. Cras urna purus, porta a lacinia in, varius quis leo. Fusce ligula velit, dapibus non dui nec, pharetra scelerisque nunc. Aliquam ut mattis leo. Maecenas vitae porttitor risus. Nunc euismod viverra condimentum. Aliquam sagittis, nibh quis rutrum tincidunt, purus ligula rhoncus quam, egestas semper nunc ante non mi. Aliquam eget enim aliquet, laoreet leo sit amet, finibus lorem.
</article>
</section>
<script>
$('.menuIcon').on('click', function() {
$('nav ul').toggleClass('show');
});
$('.aboutLink').on('click', function() {
$('html, body').animate({scrollTop: $('#about').offset().top}, 2000);
});
</script>
</body>
</html>
I have the following jsfiddle (I sampled a little).
<body>
<div class="title">
<div id="val">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum ullamcorper magna ut vulputate. Mauris hendrerit neque et risus feugiat aliquet. Donec non ullamcorper justo. In efficitur mauris sagittis neque vulputate sodales. Fusce
placerat tortor sapien, in posuere ante egestas quis. Ut lobortis semper volutpat. Phasellus enim enim, facilisis non elit in, ultricies efficitur purus. Ut sit amet posuere lorem, vitae aliquet enim. Suspendisse commodo mollis dictum. Nulla facilisi.
Aenean vitae ante sem. Sed vel lectus tincidunt, interdum erat eu, aliquet leo. Nam at iaculis lectus. Vestibulum dui mi, laoreet id bibendum in, volutpat sit amet eros. Donec nec mattis nisi, id laoreet enim. Cras tristique massa et iaculis consectetur.
Vivamus gravida consectetur vestibulum. Ut eget orci neque. Aenean eget finibus dui. Vestibulum ac fringilla sem. Morbi venenatis rhoncus dictum. Nulla ac suscipit tortor. Nulla sit amet metus odio. Pellentesque imperdiet laoreet orci, vitae vulputate
nulla consequat a. Pellentesque tempor lorem sit amet neque aliquam molestie. Ut ultrices vitae felis a blandit. Suspendisse non egestas justo, eget sagittis dolor. Morbi ac blandit ex. Aliquam porta sem quis justo interdum, a venenatis massa blandit.
Suspendisse feugiat vestibulum eros, vel aliquet nisl porttitor quis. Duis eu dignissim ante. Mauris urna nisl, scelerisque nec eleifend ut, malesuada non urna. Cras a ultricies magna. Donec diam justo, ornare at mauris ac, tempor pretium urna.
Aenean id consectetur est. Morbi eu libero ultricies, accumsan erat at, efficitur ipsum. Morbi magna risus, rhoncus ac velit mollis, dapibus finibus tortor. Integer lectus odio, vulputate non nibh at, gravida rhoncus lectus. Cras posuere odio luctus
facilisis varius. Mauris accumsan nunc nisl, vel blandit quam gravida in. Maecenas ac diam eget ante fermentum pretium in ut ex. Phasellus et enim non ligula iaculis pretium. Cras ac lacinia ipsum, non porta nunc. Maecenas id turpis justo. Duis
nulla turpis, laoreet vitae viverra a, porta et est. Nulla venenatis non erat eu vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras et convallis quam. Curabitur pellentesque mi aliquet aliquet
condimentum. Duis semper ante et facilisis auctor. Proin turpis est, placerat nec condimentum ac, ornare eget sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula ex, porta vel magna nec, sodales dapibus augue. Cras auctor
diam non sem tincidunt aliquam. Curabitur lobortis tortor porta, volutpat mi id, sagittis dolor. Nam rhoncus tortor nec ipsum vulputate, sed fermentum ligula consequat. Fusce ullamcorper augue ac lobortis euismod. Mauris ut mi vitae ipsum accumsan
commodo. Etiam nunc purus, scelerisque vitae nibh molestie, porttitor gravida ipsum.</div>
</div>
</body>
I'm trying to center the text and trying to scroll the text when it overflows. I'm not exactly sure whats wrong. I tried changing the position from absolute to fixed or relative but nothing worked. What am I doing wrong.
You are using in html overflow:hidden so change it overflow:auto; and your text is already centered.
Update css part
html {
position: relative;
background: #FF4E50;
background: -webkit-linear-gradient(right, #FF4E50, #F9D423);
background: linear-gradient(to left, #FF4E50, #F9D423);
-webkit-transition: all .5s ease;
transition: all .5s ease;
overflow: auto; /*Add this or remove it */
font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.title {
/*position: absolute;*/
/*top: 40%;*/
/*left: 0;*/
/*right: 0;*/
/*-webkit-transform: translateY(-50%);*/
/*transform: translateY(-50%);*/
text-align: center;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 80px;
text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
#import url(https://fonts.googleapis.com/css?family=Montserrat);
html,
body {
margin: 0;
padding: 0;
min-height: 100%;
}
html {
position: relative;
background: #FF4E50;
background: -webkit-linear-gradient(right, #FF4E50, #F9D423);
background: linear-gradient(to left, #FF4E50, #F9D423);
-webkit-transition: all .5s ease;
transition: all .5s ease;
overflow: auto;
font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.title {
/*position: absolute;*/
/*top: 40%;*/
/*left: 0;*/
/*right: 0;*/
/*-webkit-transform: translateY(-50%);*/
/*transform: translateY(-50%);*/
text-align: center;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 80px;
text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
.title a {
color: #fff;
text-transform: none;
text-decoration: none;
font-size: 50px;
letter-spacing: 0;
}
<body>
<div class="title">
<div id="val">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum ullamcorper magna ut vulputate. Mauris hendrerit neque et risus feugiat aliquet. Donec non ullamcorper justo. In efficitur mauris sagittis neque vulputate sodales. Fusce
placerat tortor sapien, in posuere ante egestas quis. Ut lobortis semper volutpat. Phasellus enim enim, facilisis non elit in, ultricies efficitur purus. Ut sit amet posuere lorem, vitae aliquet enim. Suspendisse commodo mollis dictum. Nulla facilisi.
Aenean vitae ante sem. Sed vel lectus tincidunt, interdum erat eu, aliquet leo. Nam at iaculis lectus. Vestibulum dui mi, laoreet id bibendum in, volutpat sit amet eros. Donec nec mattis nisi, id laoreet enim. Cras tristique massa et iaculis consectetur.
Vivamus gravida consectetur vestibulum. Ut eget orci neque. Aenean eget finibus dui. Vestibulum ac fringilla sem. Morbi venenatis rhoncus dictum. Nulla ac suscipit tortor. Nulla sit amet metus odio. Pellentesque imperdiet laoreet orci, vitae vulputate
nulla consequat a. Pellentesque tempor lorem sit amet neque aliquam molestie. Ut ultrices vitae felis a blandit. Suspendisse non egestas justo, eget sagittis dolor. Morbi ac blandit ex. Aliquam porta sem quis justo interdum, a venenatis massa blandit.
Suspendisse feugiat vestibulum eros, vel aliquet nisl porttitor quis. Duis eu dignissim ante. Mauris urna nisl, scelerisque nec eleifend ut, malesuada non urna. Cras a ultricies magna. Donec diam justo, ornare at mauris ac, tempor pretium urna.
Aenean id consectetur est. Morbi eu libero ultricies, accumsan erat at, efficitur ipsum. Morbi magna risus, rhoncus ac velit mollis, dapibus finibus tortor. Integer lectus odio, vulputate non nibh at, gravida rhoncus lectus. Cras posuere odio luctus
facilisis varius. Mauris accumsan nunc nisl, vel blandit quam gravida in. Maecenas ac diam eget ante fermentum pretium in ut ex. Phasellus et enim non ligula iaculis pretium. Cras ac lacinia ipsum, non porta nunc. Maecenas id turpis justo. Duis
nulla turpis, laoreet vitae viverra a, porta et est. Nulla venenatis non erat eu vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras et convallis quam. Curabitur pellentesque mi aliquet aliquet
condimentum. Duis semper ante et facilisis auctor. Proin turpis est, placerat nec condimentum ac, ornare eget sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula ex, porta vel magna nec, sodales dapibus augue. Cras auctor
diam non sem tincidunt aliquam. Curabitur lobortis tortor porta, volutpat mi id, sagittis dolor. Nam rhoncus tortor nec ipsum vulputate, sed fermentum ligula consequat. Fusce ullamcorper augue ac lobortis euismod. Mauris ut mi vitae ipsum accumsan
commodo. Etiam nunc purus, scelerisque vitae nibh molestie, porttitor gravida ipsum.</div>
</div>
</body>
Removed position: absolute; from .title and removed overflow: hidden; from html
#import url(https://fonts.googleapis.com/css?family=Montserrat);
html,
body {
margin: 0;
padding: 0;
min-height: 100%;
}
html {
position: relative;
background: #FF4E50;
background: -webkit-linear-gradient(right, #FF4E50, #F9D423);
background: linear-gradient(to left, #FF4E50, #F9D423);
-webkit-transition: all .5s ease;
transition: all .5s ease;
font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.title {
text-align: center;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 80px;
text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
.title a {
color: #fff;
text-transform: none;
text-decoration: none;
font-size: 50px;
letter-spacing: 0;
}
<body>
<div class="title">
<div id="val">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum ullamcorper magna ut vulputate. Mauris hendrerit neque et risus feugiat aliquet. Donec non ullamcorper justo. In efficitur mauris sagittis neque vulputate sodales. Fusce
placerat tortor sapien, in posuere ante egestas quis. Ut lobortis semper volutpat. Phasellus enim enim, facilisis non elit in, ultricies efficitur purus. Ut sit amet posuere lorem, vitae aliquet enim. Suspendisse commodo mollis dictum. Nulla facilisi.
Aenean vitae ante sem. Sed vel lectus tincidunt, interdum erat eu, aliquet leo. Nam at iaculis lectus. Vestibulum dui mi, laoreet id bibendum in, volutpat sit amet eros. Donec nec mattis nisi, id laoreet enim. Cras tristique massa et iaculis consectetur.
Vivamus gravida consectetur vestibulum. Ut eget orci neque. Aenean eget finibus dui. Vestibulum ac fringilla sem. Morbi venenatis rhoncus dictum. Nulla ac suscipit tortor. Nulla sit amet metus odio. Pellentesque imperdiet laoreet orci, vitae vulputate
nulla consequat a. Pellentesque tempor lorem sit amet neque aliquam molestie. Ut ultrices vitae felis a blandit. Suspendisse non egestas justo, eget sagittis dolor. Morbi ac blandit ex. Aliquam porta sem quis justo interdum, a venenatis massa blandit.
Suspendisse feugiat vestibulum eros, vel aliquet nisl porttitor quis. Duis eu dignissim ante. Mauris urna nisl, scelerisque nec eleifend ut, malesuada non urna. Cras a ultricies magna. Donec diam justo, ornare at mauris ac, tempor pretium urna.
Aenean id consectetur est. Morbi eu libero ultricies, accumsan erat at, efficitur ipsum. Morbi magna risus, rhoncus ac velit mollis, dapibus finibus tortor. Integer lectus odio, vulputate non nibh at, gravida rhoncus lectus. Cras posuere odio luctus
facilisis varius. Mauris accumsan nunc nisl, vel blandit quam gravida in. Maecenas ac diam eget ante fermentum pretium in ut ex. Phasellus et enim non ligula iaculis pretium. Cras ac lacinia ipsum, non porta nunc. Maecenas id turpis justo. Duis
nulla turpis, laoreet vitae viverra a, porta et est. Nulla venenatis non erat eu vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras et convallis quam. Curabitur pellentesque mi aliquet aliquet
condimentum. Duis semper ante et facilisis auctor. Proin turpis est, placerat nec condimentum ac, ornare eget sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula ex, porta vel magna nec, sodales dapibus augue. Cras auctor
diam non sem tincidunt aliquam. Curabitur lobortis tortor porta, volutpat mi id, sagittis dolor. Nam rhoncus tortor nec ipsum vulputate, sed fermentum ligula consequat. Fusce ullamcorper augue ac lobortis euismod. Mauris ut mi vitae ipsum accumsan
commodo. Etiam nunc purus, scelerisque vitae nibh molestie, porttitor gravida ipsum.</div>
</div>
</body>
Of course so easy!
change
<div id="val">
to
<div id="val" align="center">
and move from you css html {}
overflow: hidden;
to you css body
body {
overflow: hidden;
}
and add a new object in you css with, val
#val {
overflow: y;
}
enjoy of this code.
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
i am creating a custom scrollbar using This plugin. my code does not work same as I see in the demos, if I copy and paste it as same.
here is my code live example Fiddle
My goal is to create a scrollbar like this Link. you can see a slim, thin and nice scrollbar in the sidebar and also in the body...
this is what I try...
html
<div id="scrollbox3">
<h1>New Scrolling Window</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a justo erat, volutpat hendrerit dolor. Sed urna nibh, dapibus at egestas non, vulputate ut quam. Morbi a erat tristique tellus varius venenatis. Aenean lacinia sem eget turpis fringilla commodo. Sed lorem nisi, viverra a interdum nec, varius eu enim. Donec ornare, nunc quis eleifend iaculis, nulla eros mollis tellus, quis faucibus risus odio non lectus. Maecenas ac velit non metus rhoncus commodo. Nunc ligula est, ultricies sed mattis sed, dapibus at arcu. Maecenas lacinia nisl ut sem bibendum ac condimentum purus facilisis. Curabitur ut nibh lobortis libero interdum vehicula vel quis nulla.</p>
<p>Suspendisse et massa urna. Donec eu lorem nec felis dapibus aliquam viverra in quam. Suspendisse ultrices, nisi ac venenatis porttitor, erat turpis dapibus augue, sed rutrum nunc ante sed enim. Aliquam et tempus mi. Nullam malesuada, nunc a eleifend pretium, justo lorem tempus justo, id adipiscing dolor ipsum sed velit. Maecenas odio massa, feugiat vel sodales ut, placerat at quam. Cras viverra diam vitae diam elementum vitae aliquet erat tincidunt. Quisque fringilla neque in lacus tempor cursus. Curabitur eget nulla et nisi dignissim tempor vel non risus. Mauris ac ipsum metus, a auctor massa. Nunc eros ante, ullamcorper a mollis nec, aliquam sed est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
css
.track3 {
width: 10px;
background: rgba(0, 0, 0, 0);
margin-right: 2px;
border-radius: 10px;
-webkit-transition: background 250ms linear;
transition: background 250ms linear;
}
.track3:hover,
.track3.dragging {
background: #d9d9d9; /* Browsers without rgba support */
background: rgba(0, 0, 0, 0.15);
}
.handle3 {
width: 7px;
right: 0;
background: #999;
background: rgba(0, 0, 0, 0.4);
border-radius: 7px;
-webkit-transition: width 250ms;
transition: width 250ms;
}
.track3:hover .handle3,
.track3.dragging .handle3 {
width: 10px;
}
javascript
$('#scrollbox3').enscroll({
showOnHover: true,
verticalTrackClass: 'track3',
verticalHandleClass: 'handle3'
});
can someone please check it out...
You would need to include the following js as well:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://enscrollplugin.com/releases/enscroll-0.6.1.min.js"></script>