Related
I currently have a div with a list of text and a button that adds more lines of text. Once the lines of text reach the bottom of the screen the scrollbar appears. I would like the scrollbar the appear transparent and on top of the div rather than fully opaque and next to the div how it is currently. Is there any way to do this?
I used overflow:overlay; to display scrollbar over content and background-color on the thumb and track to make them 25% opaque. Please see snippet below :
div{
height:100px;
background-color:lightblue;
overflow:overlay;
}
/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #00000025 #ffffff25;
}
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 16px;
}
*::-webkit-scrollbar-track {
background: #ffffff25;
}
*::-webkit-scrollbar-thumb {
background-color: #00000025;
border-radius: 10px;
border: 3px none #00000025;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum luctus scelerisque facilisis. Etiam vestibulum neque at ornare lacinia. Phasellus malesuada massa vel dapibus volutpat. Donec elit metus, mollis id egestas vel, mattis et felis. Duis rutrum diam eu lacus molestie mollis. Phasellus interdum imperdiet vehicula. Morbi eget ex massa.
Curabitur interdum semper mauris non efficitur. Ut eros ipsum, blandit sit amet hendrerit sed, tincidunt nec est. Duis finibus posuere orci sit amet semper. Ut quis ligula nec purus elementum accumsan quis id felis. Sed eget imperdiet dui. Suspendisse faucibus porttitor massa. Proin auctor, libero ut pharetra ullamcorper, arcu enim lobortis tellus, in mollis mi turpis vitae nibh. Pellentesque eget neque pharetra, ornare diam quis, vehicula risus. Phasellus pellentesque facilisis enim, vitae elementum augue. Phasellus ac vulputate nunc. Morbi non ante gravida, mattis nisi eu, ullamcorper sem. Nullam egestas ligula ut lectus dapibus vehicula. In in erat viverra, sagittis odio a, venenatis erat. Nunc ut nunc scelerisque, egestas sapien sed, venenatis lorem. Vivamus fringilla nunc leo, in dictum tortor vehicula vitae.
Donec eleifend est in felis molestie convallis. Etiam dolor ligula, lobortis eu molestie feugiat, aliquam eget ligula. Quisque tempor ornare enim, sed varius mi vestibulum sit amet. In at vestibulum ligula. Vivamus pretium non purus vel scelerisque. Pellentesque a mauris sit amet orci lobortis pellentesque. In purus nulla, maximus non sapien vitae, rhoncus tristique arcu. In placerat dui vel iaculis commodo. Nullam malesuada suscipit nulla, at scelerisque tortor vulputate at. In a diam at libero cursus bibendum in vitae libero. In tortor magna, ornare nec massa vitae, sagittis tincidunt turpis.
Proin malesuada in lectus vitae suscipit. Sed nibh risus, accumsan vel enim vel, mattis porta augue. Aliquam et lacinia neque. Etiam pellentesque tempor augue eget ullamcorper. Aenean dictum efficitur dolor sed ultrices. Donec vitae euismod odio. Nam quis posuere ante. Fusce quis sagittis nulla, sit amet gravida urna. Nulla facilisi. Vivamus id auctor mi. Curabitur pellentesque risus et tortor viverra, vitae pretium ex fringilla. Mauris efficitur maximus lorem vitae hendrerit. Cras efficitur sollicitudin sapien sed dignissim. Duis fermentum imperdiet tincidunt. Praesent augue justo, elementum eu pharetra in, iaculis quis ipsum. Donec sit amet varius arcu, in dictum risus.
Ut ex urna, scelerisque quis augue a, viverra bibendum ligula. Aliquam iaculis dolor quis dolor finibus consectetur. Integer vehicula, turpis sed sollicitudin cursus, est justo posuere elit, non facilisis massa nulla id ligula. Duis tempus, sem vel congue scelerisque, augue mauris efficitur tortor, nec commodo magna sapien et eros. Donec ultrices dui mi, ut malesuada odio ornare a. Duis auctor, ex eu ultricies semper, leo diam consequat turpis, eu ornare felis velit rhoncus quam. Vestibulum lacinia ipsum nec ipsum laoreet faucibus. Mauris sed eros sem. Morbi a tellus quam. Nulla porttitor scelerisque massa eu efficitur. In metus libero, viverra fermentum accumsan et, tristique a ipsum. Proin lacinia tortor leo, facilisis volutpat ante elementum vel. Pellentesque sed ipsum ut sem lobortis mollis sed sit amet dolor. Pellentesque vulputate, justo id eleifend congue, felis enim consectetur nibh, id malesuada ipsum enim nec lectus.
</div>
I want to make a CTA button that sticks to the bottom of the page after page scroll reaches to some extent. Kindly look at the image below:
The rules follow:
On load, it should be on the original position of the CTA button.
When the page is getting scrolled, the CTA button will follow.
When the CTA button reaches to the top of the window, the button will move to the bottom-right corner and remains sticky over there.
Any codepen, jsfiddle or website references about this kind of interaction will be appreciated.
There are multiple ways to do this like using plugins or using simple CSS and JavaScript(below example). If you are looking for animation to button on the scroll you can make some adjustments in CSS with animation code or I guess some of the plugins are already doing this.
window.onscroll = function() {myFunction()};
var btn = document.getElementById("floatBtn");
var sticky = btn.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
btn.classList.add("sticky")
} else {
btn.classList.remove("sticky");
}
}
body {
margin: 0;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
}
.header {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
}
.content {
padding: 16px;
}
.keka {
width: 100%;
text-align: center;
}
#floatBtn {
background: #004567;
color: white;
padding: 10px 30px;
font-size: 18px;
display: inline-block;
}
.sticky {
position: fixed;
bottom: 0;
right: 20px;
}
.sticky + .content {
padding-top: 60px;
}
.content{
height: 1900px
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<div class="header">
<h2>Header of the page</h2>
<p>Some content</p>
</div>
<div class="keka">
<button id="floatBtn">Floating button</button>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet ex eu nulla interdum fermentum a at est. Vestibulum vehicula augue et nisl porta, at pretium leo consequat. Suspendisse sit amet semper nisi. In hac habitasse platea dictumst. In vehicula elit ut efficitur mollis. Nam vehicula pulvinar pulvinar. Curabitur neque purus, placerat eget nulla iaculis, tincidunt euismod lectus. Praesent facilisis at sem sit amet sagittis. Cras sagittis mi vel ornare convallis. Morbi tempus tempus lacus, eget lacinia magna porttitor non. Praesent tellus quam, molestie tincidunt libero sit amet, luctus viverra velit. Etiam vestibulum aliquam posuere. Praesent a dapibus sem. Sed cursus mi sit amet nisl maximus, eget varius lectus consectetur. Mauris molestie ac mi non malesuada. Proin faucibus sem vitae ex blandit tempor. Donec ut diam in tellus malesuada lacinia maximus non arcu. Proin blandit nisl at lacus feugiat, et auctor lectus viverra. Donec convallis eleifend ligula sagittis viverra. Vivamus mattis, felis et finibus maximus, diam felis vestibulum odio, eget efficitur tellus magna nec ante. Sed porta elit commodo nisi efficitur, in egestas nibh maximus. Integer nec leo ac ligula semper finibus at rhoncus felis. In pellentesque tincidunt pretium. Ut imperdiet eu nisi quis molestie. Cras lectus turpis, aliquam ut egestas ac, condimentum quis sem. In nec lorem dolor. Fusce non velit nec purus aliquet ultricies porttitor at metus. Donec et libero id nunc viverra dictum vel et sem. Integer tellus ligula, posuere quis dignissim sit amet, suscipit sit amet arcu. Vestibulum nec sodales magna, vitae varius justo. Ut ut felis a odio gravida malesuada eu ut lectus. Suspendisse quis nisl vel sem cursus luctus ac in nibh. Praesent at velit ac dolor convallis condimentum. Maecenas ac sagittis odio. In luctus eros sit amet accumsan maximus. Integer non dictum magna, at viverra urna. Mauris lacinia sodales nibh in scelerisque. Ut viverra ante ut nunc commodo, eu varius ipsum rutrum. Morbi dictum sodales dignissim. In eu finibus arcu. In consectetur eleifend libero. Aliquam purus felis, faucibus et rutrum non, consequat at metus. Cras ultricies metus eget rhoncus pulvinar. Quisque hendrerit at lectus fringilla aliquam. Sed viverra tellus tellus, eget fermentum mi ultrices in. Cras auctor, tortor quis eleifend aliquet, dui orci volutpat erat, quis sagittis nisl nisi at lacus. Suspendisse non condimentum orci. Quisque in elit mi. Praesent malesuada nibh a sapien fermentum vehicula. In in felis nibh. Nunc vitae turpis et est aliquet tempor vulputate volutpat neque. Vestibulum ut sapien sit amet diam sodales convallis sit amet euismod urna. In vehicula fermentum est, non porttitor risus pellentesque quis. Fusce condimentum mauris ut felis fringilla maximus. Nullam pharetra nisi nec enim sodales tincidunt. Morbi imperdiet felis eget lacus sagittis ornare. Donec euismod metus at erat luctus, non ullamcorper nunc ultricies. Sed sit amet vestibulum urna, et faucibus felis. Curabitur non mollis arcu, ut rhoncus leo. Integer sagittis iaculis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>
</body>
</html>
I have an element at the top of the screen with position:sticky; and a JS scroll eventlistener to add a stuck class when the element is stuck (scroll Y is bigger than 0).
This stuck makes an element (that has CSS transition) inside the sticky element to reduce in height.
When you scroll very slowly, this change in height makes the scrollY jump back to zero and removes the stuck class, and this creates a jolty scrolling loop which is infinite until you scroll faster and outscroll the issue.
How can I make this smooth when using position: sticky, you can see it live here:
https://jsfiddle.net/27rzba5v/
This is happening because you're changing the element's height, which is affecting the box model and thus the dimensions of your document. A simple fix would be to instead use a transform on .wrap instead of transitioning its height. It's better to animate transforms and opacity as it can be handled by the GPU rather than by making the browser repaint.
var lastScrollY = 0;
var ticking = false;
window.addEventListener('scroll', function(e) {
lastScrollY = window.scrollY;
if ( ! ticking ) {
window.requestAnimationFrame(function() {
console.log( lastScrollY );
if ( lastScrollY > 0 ) {
document.body.classList.add('stuck');
} else {
document.body.classList.remove('stuck');
}
ticking = false;
});
ticking = true;
}
} );
body {
margin: 0;
}
.wrap {
background: #666;
text-align: center;
position: sticky;
top: 0;
transition: 0.5s; /* Move transition here */
transform-origin: top left; /* Make sure transition happens from the top left */
}
.block {
width: 80px;
height: 80px;
background: red;
display: block;
}
.stuck .wrap { /* Transform wrap instead of block */
transform: scaleY(.5); /* Change scale instead of height */
}
<div class="wrap">
<span class="block"></span>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac lorem a metus tincidunt eleifend id in odio. Nam malesuada hendrerit tristique. Pellentesque id ornare elit, ac lobortis metus. Sed iaculis et nisi et consectetur. Proin pellentesque metus mi, quis fringilla mauris pulvinar et. Vivamus pharetra elit ligula, eu consectetur magna consequat nec. Donec sed enim sit amet augue malesuada varius id a libero. Nullam nec ante id justo elementum congue quis in purus. Integer finibus cursus volutpat. Donec non laoreet ipsum.
Maecenas id venenatis velit, eu feugiat dolor. Vestibulum malesuada erat ut turpis mattis vehicula. Vestibulum sem leo, cursus quis lacinia eu, tincidunt eu velit. Nulla odio elit, tristique vel bibendum vitae, placerat nec eros. Proin auctor id leo sed rutrum. Proin convallis erat sit amet neque aliquam vestibulum. Ut sodales vel nisl eu imperdiet.
Donec a porttitor dui, vitae ullamcorper nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam non elit eu elit blandit hendrerit id ut eros. Duis sagittis elementum ligula eu venenatis. Aenean nunc mauris, dignissim ut venenatis ac, pharetra eget magna. Curabitur elementum enim sed pharetra rhoncus. Praesent sodales at ex at consectetur. Curabitur sed dictum mi, ut eleifend arcu. Nam feugiat risus quis congue porttitor. Maecenas vehicula lorem ultrices ante sollicitudin, placerat sollicitudin dolor fermentum. Aliquam arcu turpis, faucibus vel placerat a, molestie vel lectus. Sed condimentum euismod tincidunt. Mauris odio tortor, luctus id eleifend vitae, aliquet ut libero. Vestibulum vitae placerat turpis. Duis nec facilisis eros. Morbi ipsum arcu, tempus ac massa nec, mollis aliquet lacus.
Phasellus maximus eros quis massa maximus, et mattis tellus cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus interdum, cursus diam ut, posuere purus. Duis non vestibulum nulla, vitae egestas elit. Phasellus venenatis libero in nunc lobortis tempor in vel orci. Praesent varius lacus eleifend, pretium lectus ut, pulvinar arcu. Nunc ornare dolor velit, id pulvinar urna semper eget. Aenean finibus dui vitae dolor ullamcorper finibus. Cras consequat viverra tellus, a accumsan sem viverra sed. Nulla felis tortor, laoreet non tincidunt elementum, tempus ac risus. Sed nibh nisl, ultrices vel iaculis in, fringilla at ipsum. Curabitur metus ligula, tincidunt non arcu eget, ultricies pellentesque ligula. Duis id est posuere, molestie urna non, gravida tortor. Praesent lacinia erat ac diam sagittis, quis faucibus nunc blandit.
Fusce aliquet tincidunt turpis, ut consequat metus consectetur at. Nunc volutpat semper enim, ut finibus orci luctus in. Mauris pharetra consectetur arcu sed pulvinar. Sed cursus fermentum velit, mattis varius ante commodo ac. Fusce erat mauris, sagittis quis eros vitae, consectetur venenatis nibh. Fusce porttitor tortor lectus, at efficitur diam dictum et. Quisque et suscipit sem. Mauris vulputate orci tellus, non efficitur eros blandit ut. Donec eget hendrerit elit.
If you must transition the element's height then you could offset the effects of the dimensions changing by using a container as a buffer.
var lastScrollY = 0;
var ticking = false;
window.addEventListener('scroll', function(e) {
lastScrollY = window.scrollY;
if ( ! ticking ) {
window.requestAnimationFrame(function() {
console.log( lastScrollY );
if ( lastScrollY > 0 ) {
document.body.classList.add('stuck');
} else {
document.body.classList.remove('stuck');
}
ticking = false;
});
ticking = true;
}
} );
body {
margin: 0;
}
.wrapoffset { /* Make this element sticky instead */
height: 80px;
position: sticky;
top: 0;
width: 100%;
}
.wrap {
background: #666;
text-align: center;
width: 100%;
}
.block {
height: 80px;
width: 80px;
background: red;
display: block;
transition: 0.5s;
}
.stuck .block {
height: 40px;
}
<div class="wrapoffset"> <!-- new element -->
<div class="wrap">
<span class="block"></span>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac lorem a metus tincidunt eleifend id in odio. Nam malesuada hendrerit tristique. Pellentesque id ornare elit, ac lobortis metus. Sed iaculis et nisi et consectetur. Proin pellentesque metus mi, quis fringilla mauris pulvinar et. Vivamus pharetra elit ligula, eu consectetur magna consequat nec. Donec sed enim sit amet augue malesuada varius id a libero. Nullam nec ante id justo elementum congue quis in purus. Integer finibus cursus volutpat. Donec non laoreet ipsum.
Maecenas id venenatis velit, eu feugiat dolor. Vestibulum malesuada erat ut turpis mattis vehicula. Vestibulum sem leo, cursus quis lacinia eu, tincidunt eu velit. Nulla odio elit, tristique vel bibendum vitae, placerat nec eros. Proin auctor id leo sed rutrum. Proin convallis erat sit amet neque aliquam vestibulum. Ut sodales vel nisl eu imperdiet.
Donec a porttitor dui, vitae ullamcorper nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam non elit eu elit blandit hendrerit id ut eros. Duis sagittis elementum ligula eu venenatis. Aenean nunc mauris, dignissim ut venenatis ac, pharetra eget magna. Curabitur elementum enim sed pharetra rhoncus. Praesent sodales at ex at consectetur. Curabitur sed dictum mi, ut eleifend arcu. Nam feugiat risus quis congue porttitor. Maecenas vehicula lorem ultrices ante sollicitudin, placerat sollicitudin dolor fermentum. Aliquam arcu turpis, faucibus vel placerat a, molestie vel lectus. Sed condimentum euismod tincidunt. Mauris odio tortor, luctus id eleifend vitae, aliquet ut libero. Vestibulum vitae placerat turpis. Duis nec facilisis eros. Morbi ipsum arcu, tempus ac massa nec, mollis aliquet lacus.
Phasellus maximus eros quis massa maximus, et mattis tellus cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus interdum, cursus diam ut, posuere purus. Duis non vestibulum nulla, vitae egestas elit. Phasellus venenatis libero in nunc lobortis tempor in vel orci. Praesent varius lacus eleifend, pretium lectus ut, pulvinar arcu. Nunc ornare dolor velit, id pulvinar urna semper eget. Aenean finibus dui vitae dolor ullamcorper finibus. Cras consequat viverra tellus, a accumsan sem viverra sed. Nulla felis tortor, laoreet non tincidunt elementum, tempus ac risus. Sed nibh nisl, ultrices vel iaculis in, fringilla at ipsum. Curabitur metus ligula, tincidunt non arcu eget, ultricies pellentesque ligula. Duis id est posuere, molestie urna non, gravida tortor. Praesent lacinia erat ac diam sagittis, quis faucibus nunc blandit.
Fusce aliquet tincidunt turpis, ut consequat metus consectetur at. Nunc volutpat semper enim, ut finibus orci luctus in. Mauris pharetra consectetur arcu sed pulvinar. Sed cursus fermentum velit, mattis varius ante commodo ac. Fusce erat mauris, sagittis quis eros vitae, consectetur venenatis nibh. Fusce porttitor tortor lectus, at efficitur diam dictum et. Quisque et suscipit sem. Mauris vulputate orci tellus, non efficitur eros blandit ut. Donec eget hendrerit elit.
If you want to optimize the performance even more you can look into using IntersectionObserver with a polyfill instead of listening for events on scroll.
How to I make a Design a scrollbar using html, css or javascript?
What I dont want
I dont want to edit the current the scrollbar for my browser.
What I do Want
I want to make my own scrollbar for my companies website.
https://keenthemes.com/metronic/preview/?demo=demo4
"Code"
I dont know how to even start building this but ill do my best!
Html
.Stack_main-section {
height: 40rem;
border: .1rem solid lightgray;
/* flex display so the content is full height */
display: flex;
}
.Stack_content {
padding: .7remabove
}
.Stack_bar-track {
background: lightgray;
padding: .4rem;
}
.Stack_bar {
height: .4rem;
width: .7rem;
height: 9rem;
border-radius: .8rem;
background: gray;
}
<section class="Stack_main-section">
<div class="Stack_content ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac turpis at massa consectetur malesuada vel eu lorem. Vivamus ac eros id ex hendrerit rutrum eget et turpis. Nunc mollis diam id purus porttitor eleifend a interdum neque. Quisque et molestie
enim, eu dignissim nunc. Suspendisse varius mauris eu aliquet rutrum. Maecenas convallis tincidunt tellus, nec tincidunt tellus venenatis at. Quisque eget lacinia magna, ac placerat justo. Donec cursus elementum massa, id posuere lacus posuere eget.
Nunc at dui sodales, varius erat vel, varius lorem. Pellentesque cursus iaculis felis, auctor ultrices ligula elementum vel. Maecenas est dui, ullamcorper ut semper vel, tincidunt sit amet tellus. Nunc ornare ornare sapien in condimentum. Morbi porttitor
feugiat ligula, sit amet feugiat tellus maximus eget. Sed lobortis semper urna, in accumsan ipsum. Aenean dictum dui non dui vehicula porta. Vivamus pellentesque ligula eu egestas facilisis. Pellentesque vitae turpis consectetur lorem laoreet auctor.
Nunc ultrices pellentesque mi, nec lobortis neque facilisis id. Quisque pharetra vitae nibh eu venenatis. Cras pretium convallis cursus. Phasellus quis ex nisi. Nulla et laoreet eros, ac laoreet ante. Maecenas ornare risus a pellentesque varius. Sed
tristique tellus quam, sed volutpat ex sodales quis. Phasellus congue velit a nisl consequat, at tincidunt mi gravida. Morbi sit amet magna a sapien varius accumsan. Phasellus scelerisque, urna faucibus placerat venenatis, dui est fermentum massa,
non lacinia arcu sem in orci. Ut elementum massa et turpis aliquam varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut elementum augue. Sed pulvinar eleifend cursus. Donec id mi odio. Ut nec nibh malesuada, aliquet velit nec,
tincidunt mauris. Mauris sagittis placerat enim, at faucibus turpis vestibulum vel. Pellentesque at venenatis mauris, lacinia blandit dolor. Integer massa sem, elementum a nulla quis, rutrum euismod felis. Cras a lacinia urna. Nulla scelerisque venenatis
lectus ut ullamcorper. Curabitur eu suscipit metus. Praesent velit elit, luctus a facilisis nec, tempus non diam. Fusce nec aliquam est. Maecenas odio odio, pulvinar vel volutpat et, ullamcorper a ligula. Fusce bibendum lacus in est ultrices, vitae
mattis mauris sodales. Curabitur massa nisl, placerat a nunc a, scelerisque rhoncus dui. Vestibulum nibh dui, dictum et porta vel, hendrerit et augue. Morbi viverra est vel sapien venenatis faucibus. Nullam iaculis congue quam. Vestibulum dignissim
iaculis nulla, congue tincidunt nisi iaculis vitae. Fusce mollis aliquam ante, a sagittis dolor mattis id. Morbi aliquam sem nunc, at dictum sem aliquam ac. Suspendisse molestie justo leo, at venenatis mauris aliquam eu. Nunc id tortor malesuada diam
consectetur dapibus sit amet a lorem. Pellentesque dictum et libero vitae semper. Donec sit amet ipsum vel nulla eleifend fringilla ac at velit. Donec consectetur aliquam metus. Integer eget ex et velit imperdiet pulvinar. Duis nisi ante, finibus
eu posuere id, sodales vel sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui ex, placerat eu felis a, luctus ultricies nibh. Nam malesuada viverra facilisis. Nam rhoncus elit velit, at ullamcorper nisi viverra scelerisque. Pellentesque
et lacus non dolor fermentum fermentum. Morbi in vulputate nunc, sit amet malesuada massa. Nullam euismod dui id egestas scelerisque. Donec vel ex ut justo mollis varius. Quisque at tortor nec est cursus iaculis. Vivamus gravida purus a ligula elementum
dictum. Mauris diam dolor, convallis quis imperdiet et, maximus quis leo. Morbi aliquam pretium lectus ac hendrerit.t
</div>
<div class="Stack_bar-track">
<div class="Stack_bar">
.
</div>
</div>
</section>
!important
That just an example of what I wnat I know if this is you you build it professionally.
Please help and Thank you in advance.
Here is a simple example of what you can do with -webkit-scrollbar
.Stack_main-section {
height: 40rem;
border: .1rem solid lightgray;
/* flex display so the content is full height */
display: flex;
}
.Stack_content {
padding: .7remabove
}
.Stack_bar-track {
background: lightgray;
padding: .4rem;
}
.Stack_bar {
height: .4rem;
width: .7rem;
height: 9rem;
border-radius: .8rem;
background: gray;
}
/* Scrollbar */
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-track-piece {
background-color: #ddd;
}
*::-webkit-scrollbar-thumb {
background-color: #aaa;
border-radius: 6px;
border-style: none;
}
<section class="Stack_main-section">
<div class="Stack_content ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac turpis at massa consectetur malesuada vel eu lorem. Vivamus ac eros id ex hendrerit rutrum eget et turpis. Nunc mollis diam id purus porttitor eleifend a interdum neque. Quisque et molestie
enim, eu dignissim nunc. Suspendisse varius mauris eu aliquet rutrum. Maecenas convallis tincidunt tellus, nec tincidunt tellus venenatis at. Quisque eget lacinia magna, ac placerat justo. Donec cursus elementum massa, id posuere lacus posuere eget.
Nunc at dui sodales, varius erat vel, varius lorem. Pellentesque cursus iaculis felis, auctor ultrices ligula elementum vel. Maecenas est dui, ullamcorper ut semper vel, tincidunt sit amet tellus. Nunc ornare ornare sapien in condimentum. Morbi porttitor
feugiat ligula, sit amet feugiat tellus maximus eget. Sed lobortis semper urna, in accumsan ipsum. Aenean dictum dui non dui vehicula porta. Vivamus pellentesque ligula eu egestas facilisis. Pellentesque vitae turpis consectetur lorem laoreet auctor.
Nunc ultrices pellentesque mi, nec lobortis neque facilisis id. Quisque pharetra vitae nibh eu venenatis. Cras pretium convallis cursus. Phasellus quis ex nisi. Nulla et laoreet eros, ac laoreet ante. Maecenas ornare risus a pellentesque varius. Sed
tristique tellus quam, sed volutpat ex sodales quis. Phasellus congue velit a nisl consequat, at tincidunt mi gravida. Morbi sit amet magna a sapien varius accumsan. Phasellus scelerisque, urna faucibus placerat venenatis, dui est fermentum massa,
non lacinia arcu sem in orci. Ut elementum massa et turpis aliquam varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut elementum augue. Sed pulvinar eleifend cursus. Donec id mi odio. Ut nec nibh malesuada, aliquet velit nec,
tincidunt mauris. Mauris sagittis placerat enim, at faucibus turpis vestibulum vel. Pellentesque at venenatis mauris, lacinia blandit dolor. Integer massa sem, elementum a nulla quis, rutrum euismod felis. Cras a lacinia urna. Nulla scelerisque venenatis
lectus ut ullamcorper. Curabitur eu suscipit metus. Praesent velit elit, luctus a facilisis nec, tempus non diam. Fusce nec aliquam est. Maecenas odio odio, pulvinar vel volutpat et, ullamcorper a ligula. Fusce bibendum lacus in est ultrices, vitae
mattis mauris sodales. Curabitur massa nisl, placerat a nunc a, scelerisque rhoncus dui. Vestibulum nibh dui, dictum et porta vel, hendrerit et augue. Morbi viverra est vel sapien venenatis faucibus. Nullam iaculis congue quam. Vestibulum dignissim
iaculis nulla, congue tincidunt nisi iaculis vitae. Fusce mollis aliquam ante, a sagittis dolor mattis id. Morbi aliquam sem nunc, at dictum sem aliquam ac. Suspendisse molestie justo leo, at venenatis mauris aliquam eu. Nunc id tortor malesuada diam
consectetur dapibus sit amet a lorem. Pellentesque dictum et libero vitae semper. Donec sit amet ipsum vel nulla eleifend fringilla ac at velit. Donec consectetur aliquam metus. Integer eget ex et velit imperdiet pulvinar. Duis nisi ante, finibus
eu posuere id, sodales vel sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui ex, placerat eu felis a, luctus ultricies nibh. Nam malesuada viverra facilisis. Nam rhoncus elit velit, at ullamcorper nisi viverra scelerisque. Pellentesque
et lacus non dolor fermentum fermentum. Morbi in vulputate nunc, sit amet malesuada massa. Nullam euismod dui id egestas scelerisque. Donec vel ex ut justo mollis varius. Quisque at tortor nec est cursus iaculis. Vivamus gravida purus a ligula elementum
dictum. Mauris diam dolor, convallis quis imperdiet et, maximus quis leo. Morbi aliquam pretium lectus ac hendrerit.t
</div>
<!--div class="Stack_bar-track">
<div class="Stack_bar">
.
</div>
</div-->
</section>
I hope it helps.
::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer
These are the elements you're looking for. CSS-Tricks has some excellent examples outlined and what you're trying to achieve here isn't very specific, but if you clarify the kind of styles you're going for I'd be happy to edit my answer a bit to accommodate!
As well here's a CodePen with some pretty clean options so you can compare and see how the styoes react.
Hope this helps!
For browser's that don't use webkit as a render engine, you just want to add it's alternative.
Or simply use a plug-in. I found this megathread with every bit of information you will likely ever need on the topic.
https://stackoverflow.com/a/14150577/5860648
Imagine a div that has a height of 300 px, and at its bottom there is another div nested with a height of 100 px. I'd like to freeze (stick to top) this 100 px div, but the background properties (eg. background color) are set in its container div.
jsfiddle
body {
padding: 0;
margin: 0;
border: 0;
}
#first {
background: #121212;
width: 100%;
height: 300px;
color: #ffffff;
}
#nonsticky {
height: 200px;
}
#sticky {
background: rgba(255, 255, 255, 0.3);
height: 100px;
}
#second {
background: #cecece;
width: 100%;
}
p {
padding: 15px 30px;
margin: 0;
}
<div id="first">
<div id="nonsticky">
<p>This div should scroll away when scrolling down the page.</p>
</div>
<div id="sticky">
<p>This div should stick to top of screen when scrolling down the page. However, the "first" div should stick, as background properties are set there.</p>
</div>
</div>
<div id="second">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan pharetra nibh in lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla sodales a dui accumsan accumsan. Ut vitae diam turpis. Sed eu ante non quam cursus cursus ac nec nunc. Mauris bibendum massa et turpis semper porttitor. Integer consectetur dignissim ligula quis semper. Praesent a lorem erat.</p>
<p>Donec eleifend gravida massa, sed hendrerit nibh laoreet et. Pellentesque dapibus, metus sed pretium sodales, arcu dui suscipit felis, ac dignissim quam ex bibendum mi. Sed ut ornare enim. Pellentesque condimentum pulvinar metus, egestas varius justo commodo at. Praesent sollicitudin ultrices tortor non fermentum. Vestibulum ultrices justo sit amet consequat auctor. Nullam tristique odio felis, vel dapibus tortor ornare a. Cras quis lectus iaculis, mattis ipsum dignissim, pharetra urna. Integer lobortis tellus turpis, in molestie ante condimentum sed. Maecenas bibendum augue non libero porta, sed congue lorem varius.</p>
<p>Nam justo massa, sollicitudin at purus non, viverra lacinia mi. Morbi nisi ipsum, vestibulum eget hendrerit vel, placerat vitae velit. Suspendisse a enim in massa aliquet lacinia a vel quam. In luctus, ligula fermentum mattis semper, est neque tincidunt neque, faucibus elementum lectus odio a urna. Etiam suscipit augue eu dui tempus condimentum ac sed ligula. Aliquam erat volutpat. Nulla interdum ante at nunc viverra, eget ullamcorper justo sodales. Duis venenatis lectus at felis varius, accumsan sodales diam rutrum. Integer lobortis ante nisl, vel dapibus lacus finibus semper. Pellentesque nec semper ipsum. In eu purus rhoncus, dictum arcu volutpat, mollis nisi. Phasellus metus mi, aliquet sed ultricies a, viverra sit amet turpis. Duis vestibulum vitae eros at porttitor. Pellentesque aliquam est quis massa suscipit interdum. Donec urna magna, commodo in condimentum a, rhoncus in enim. Donec mattis magna sed libero gravida, vulputate condimentum lacus pulvinar.</p>
<p>Sed mattis semper tellus in imperdiet. Suspendisse vel faucibus justo, lobortis vulputate ex. Sed malesuada porta ullamcorper. Nullam mattis metus ac nunc faucibus, id vulputate ex tincidunt. Nunc sagittis, ligula in ullamcorper dignissim, massa arcu elementum quam, rutrum mollis ante ligula sit amet massa. Suspendisse finibus commodo elit, id lacinia mauris cursus eu. Aliquam luctus nisi sit amet massa fermentum iaculis. Nulla porttitor ex id faucibus mollis. Mauris suscipit gravida ante eu ultrices. Nullam a dictum tellus. Pellentesque ac magna quam. Quisque varius ac odio eget gravida. Donec aliquam libero mi, in euismod urna condimentum nec. Integer imperdiet tortor et velit rutrum tempus.</p>
<p>Proin rutrum turpis purus, ac ullamcorper tellus tincidunt id. Quisque pretium pulvinar luctus. Fusce viverra purus id ipsum mollis accumsan non at purus. Aenean non ultrices mi. Sed ante mi, gravida tempus efficitur at, tempor in orci. Praesent molestie justo lectus, at euismod urna consectetur eget. Aliquam bibendum, nibh ut semper rhoncus, ligula magna ultrices turpis, at auctor neque tellus nec tellus. Cras dictum at lacus et ullamcorper. Nulla in molestie augue. Mauris turpis ligula, porttitor sed congue sit amet, mollis ac mauris. Aliquam rhoncus nec leo quis condimentum. Morbi tempor cursus sapien vel luctus. Sed tincidunt nibh quis quam feugiat mattis. Integer ac ante maximus, pretium augue vel, eleifend arcu. Vivamus augue nisl, pulvinar sit amet eleifend vitae, mattis rhoncus nibh. Donec sed luctus tellus, in venenatis velit.</p>
</div>
Thank you all in advance!
A possible solution, using jQuery:
$first = $('#first');
$sticky = $('#sticky');
$(window).scroll(function() {
$first.toggleClass('fixed', $(window).scrollTop() > $first.height() - $sticky.height())
.css('top', $(window).scrollTop() - $first.height() + $sticky.height());
});
The CSS:
.fixed{
position: relative;
top: 0;
left: 0;
width: 100%;
}
JS Fiddle Demo
if I understand your question the "sticky" part has a rgba background so I guess the first container has background image or simillar.
I your case I would stick the full container with negative top value to make the effect is the sticky part the one fixed positioned.
basically you use this simple jquery:
$(window).scroll(function () {
if ($(window).scrollTop() > 200) {
$("#first").addClass("fixed");
} else {
$("#first").removeClass("fixed");
}
});
and you add this class:
.fixed {position:fixed;top:-200px}
Here's your FIDDLE
Something like this?
Updated 2
JSFiddle
Bassically you need to add the following class style to your CSS:
#sticky.top {
position: fixed;
top: 0;
}
And the following jQuery.
$(window).scroll(function() {
var height = $(window).scrollTop();
if (height > 200) {
$("#sticky").addClass("top");
} else {
$("#sticky").removeClass("top");
}
});
body {
padding: 0;
margin: 0;
border: 0;
}
#first {
background: #121212;
width: 100%;
height: 300px;
color: #ffffff;
}
#nonsticky {
height: 200px;
}
#sticky {
background: rgba(255, 255, 255, 0.3);
height: 100px;
}
#sticky.top {
background:#585858;
position: fixed;
top: 0;
}
#second {
background: #cecece;
width: 100%;
}
p {
padding: 15px 30px;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="first">
<div id="nonsticky">
<p>This div should scroll away when scrolling down the page.</p>
</div>
<div id="sticky">
<p>This div should stick to top of screen when scrolling down the page. However, the "first" div should stick, as background properties are set there.</p>
</div>
</div>
<div id="second">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan pharetra nibh in lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla sodales a dui accumsan accumsan. Ut vitae diam turpis.
Sed eu ante non quam cursus cursus ac nec nunc. Mauris bibendum massa et turpis semper porttitor. Integer consectetur dignissim ligula quis semper. Praesent a lorem erat.</p>
<p>Donec eleifend gravida massa, sed hendrerit nibh laoreet et. Pellentesque dapibus, metus sed pretium sodales, arcu dui suscipit felis, ac dignissim quam ex bibendum mi. Sed ut ornare enim. Pellentesque condimentum pulvinar metus, egestas varius justo
commodo at. Praesent sollicitudin ultrices tortor non fermentum. Vestibulum ultrices justo sit amet consequat auctor. Nullam tristique odio felis, vel dapibus tortor ornare a. Cras quis lectus iaculis, mattis ipsum dignissim, pharetra urna. Integer
lobortis tellus turpis, in molestie ante condimentum sed. Maecenas bibendum augue non libero porta, sed congue lorem varius.</p>
<p>Nam justo massa, sollicitudin at purus non, viverra lacinia mi. Morbi nisi ipsum, vestibulum eget hendrerit vel, placerat vitae velit. Suspendisse a enim in massa aliquet lacinia a vel quam. In luctus, ligula fermentum mattis semper, est neque tincidunt
neque, faucibus elementum lectus odio a urna. Etiam suscipit augue eu dui tempus condimentum ac sed ligula. Aliquam erat volutpat. Nulla interdum ante at nunc viverra, eget ullamcorper justo sodales. Duis venenatis lectus at felis varius, accumsan
sodales diam rutrum. Integer lobortis ante nisl, vel dapibus lacus finibus semper. Pellentesque nec semper ipsum. In eu purus rhoncus, dictum arcu volutpat, mollis nisi. Phasellus metus mi, aliquet sed ultricies a, viverra sit amet turpis. Duis vestibulum
vitae eros at porttitor. Pellentesque aliquam est quis massa suscipit interdum. Donec urna magna, commodo in condimentum a, rhoncus in enim. Donec mattis magna sed libero gravida, vulputate condimentum lacus pulvinar.</p>
<p>Sed mattis semper tellus in imperdiet. Suspendisse vel faucibus justo, lobortis vulputate ex. Sed malesuada porta ullamcorper. Nullam mattis metus ac nunc faucibus, id vulputate ex tincidunt. Nunc sagittis, ligula in ullamcorper dignissim, massa arcu
elementum quam, rutrum mollis ante ligula sit amet massa. Suspendisse finibus commodo elit, id lacinia mauris cursus eu. Aliquam luctus nisi sit amet massa fermentum iaculis. Nulla porttitor ex id faucibus mollis. Mauris suscipit gravida ante eu ultrices.
Nullam a dictum tellus. Pellentesque ac magna quam. Quisque varius ac odio eget gravida. Donec aliquam libero mi, in euismod urna condimentum nec. Integer imperdiet tortor et velit rutrum tempus.</p>
<p>Proin rutrum turpis purus, ac ullamcorper tellus tincidunt id. Quisque pretium pulvinar luctus. Fusce viverra purus id ipsum mollis accumsan non at purus. Aenean non ultrices mi. Sed ante mi, gravida tempus efficitur at, tempor in orci. Praesent molestie
justo lectus, at euismod urna consectetur eget. Aliquam bibendum, nibh ut semper rhoncus, ligula magna ultrices turpis, at auctor neque tellus nec tellus. Cras dictum at lacus et ullamcorper. Nulla in molestie augue. Mauris turpis ligula, porttitor
sed congue sit amet, mollis ac mauris. Aliquam rhoncus nec leo quis condimentum. Morbi tempor cursus sapien vel luctus. Sed tincidunt nibh quis quam feugiat mattis. Integer ac ante maximus, pretium augue vel, eleifend arcu. Vivamus augue nisl, pulvinar
sit amet eleifend vitae, mattis rhoncus nibh. Donec sed luctus tellus, in venenatis velit.</p>
</div>