Bootstrap 4 sticky-top change Navbar color - javascript

To get a sticky navbar I used the Bootstrap 4 class sticky-top. I prefer the css solution instead of some JS, because that made some errors in the past.
I want to have my navbar in a transparent color when the user reaches it. (The moment my navbar gets sticky - that works). Before that it should have a random color. (That does not work - The grey background emerges from the transparent background of the sticky-top class).
I have not found a good solution to get this yet. I have tried to add a new class via JS, but that did not work.
Codepen example
/* Open tabs */
function openTab(evt, parameter) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(parameter).style.display = "block";
evt.currentTarget.className += " active";
}
/* Open tabs END */
/* Smooth scroll */
//Only where the class smooth-scroll is, scrolling is enabled
$(document).ready(function () {
$('a.smooth-scroll[href*="#"]:not([href="#three"])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
//Comment the following line if you don't want to see the anchor in the url
//target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
/* Smooth scroll END */
/* Global */
* {
margin: 0px;
padding: 0px;
font-family: Roboto,
}
.separator {
height: 50px;
background-color: black;
}
/* Global END */
/* Big Carousel */
.big-carousel .carousel-item {
/* viewport height */
height: 375px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.big-carousel .carousel-inner {
height: 375px;
}
.big-carousel .carousel-caption {
margin-bottom: 110px;
}
.big-carousel .carousel-caption a {
border: none;
background-color: rgba(255, 0, 77);
color: white;
padding: 20px;
border-radius: 1px;
}
.big-carousel .carousel-caption a:hover {
background: #EFFF00;
text-decoration: none;
color: black;
}
.big-carousel .carousel-indicators i {
font-size: 40px;
color: white;
margin-bottom: 100px;
}
/* Big Carousel END */
/* Navigation */
.navbar {
background-color: #020202;
border-radius: 0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
z-index: 1 !important;
}
.sticky-top {
background-color: rgba(0, 0, 0, 0.8);
}
.navbar-brand {
/*padding-left: 60px;*/
}
.navbar a {
color: #b6b9c1 !important;
}
.nav-social {
padding-right: 10px;
}
.nav-social i {
color: white;
}
.navbar .hvr-underline-from-center::before {
background: white;
height: 2px;
}
.navbar-toggler {
outline: none !important;
box-shadow: none;
border: none !important;
}
.navbar-toggler:focus,
.navbar-toggler:active {
outline: none !important;
box-shadow: none;
}
.cta-nav {
margin-top: 8px;
margin-bottom: 5px;
margin-left: 25px;
}
.cta-nav a {
background-color: rgba(255, 0, 77);
color: white !important;
padding: 10px;
border-radius: 1px;
}
.cta-nav a:hover {
background: #EFFF00;
text-decoration: none;
color: black !important;
}
#media (min-width: 1px) and (max-width: 576px) {
.navbar-brand {
padding-left: 7.5px;
}
.nav-social {
margin-left: 14px;
}
}
#media (min-width: 577px) and (max-width: 768px) {
.navbar-brand {
padding-left: 15px;
}
.nav-social {
margin-left: 14px;
}
}
#media (min-width: 769px) and (max-width: 992px) {
.navbar-brand {
padding-left: 25px;
}
.nav-social {
padding-right: 20px;
}
}
#media (min-width: 993px) and (max-width: 1200px) {
.navbar-brand {
padding-left: 50px;
}
.nav-social {
padding-right: 30px;
}
}
#media (min-width: 1201px) and (max-width: 9999px) {
.navbar-brand {
padding-left: 70px;
}
.nav-social {
padding-right: 50px;
}
}
/* Navigation END */
/* Tab content */
.tabcontent {
display: none;
color: black;
padding-top: 40px;
padding-bottom: 50px;
}
.tabcontent h1 {
text-align: center;
margin-bottom: 15px;
}
.tabcontent h2,
h3,
h4 {
text-align: center;
}
.tabcontent a {
text-decoration: none;
color: #719DE3;
padding-bottom: 2px;
}
.tabcontent p {
color: #121212;
}
.tabcontent {
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
/* Fading effect takes 1 second */
}
#-webkit-keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Tab content END */
/* Start Section 1 */
.start-section {
height: 100%;
background: #DAD299;
/* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #B0DAB9, #DAD299);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #B0DAB9, #DAD299);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background-attachment: fixed;
}
/* XX1 */
/* XX1 END*/
/* XX2 */
/* XX2 */
/* XX3 */
/* XX3 END */
/* Start Section END */
<!DOCTYPE html>
<html>
<!-- Meta head -->
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/all-css.css">
<!-- JQuery first -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="js/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<!-- Meta head END -->
<body id="top" onload="openTab(event, 't1');">
<!-- Big Carousel -->
<div class="big-carousel">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url(images/MG_9185.jpg)">
<div class="carousel-caption">
<h3>Titel</h3>
<p>Text</p>
<br>
<div class="hvr-pulse-grow cc-a d-md-none">
Tickets
</div>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image:">
<div class="carousel-caption">
<h3>Titel</h3>
<p>Text</p>
<br>
<div class="hvr-pulse-grow cc-a d-md-none">
Tickets
</div>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image:">
<div class="carousel-caption">
<h3>Titel</h3>
<p>Text</p>
<br>
<div class="hvr-pulse-grow cc-a d-md-none">
Tickets
</div>
</div>
</div>
</div>
<!-- Arrow left -->
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<!-- Arrow right -->
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- Big Carousel END -->
<!-- Navigation -->
<div id="nav-anker"></div>
<nav class="navbar navbar-dark navbar-expand-md sticky-top">
<img style="width: 45px;" src="">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar2" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbar2">
<ul class="navbar-nav mx-auto text-center">
<li class="nav-item">
<a style="cursor:pointer;" class="smooth-scroll nav-link" href="#nav-anker" onclick="openTab(event, 't1')"><span class="hvr-underline-from-center">Die Tour</span></a>
</li>
<li class="nav-item">
<a style="cursor:pointer;" class="smooth-scroll nav-link" href="#nav-anker" onclick="openTab(event, 't2')"><span class="hvr-underline-from-center">Vorbereitung</span></a>
</li>
<li class="nav-item">
<a style="cursor:pointer;" class="smooth-scroll nav-link" href="#nav-anker" onclick="openTab(event, 't3')"><span class="hvr-underline-from-center">Termine & Städte</span></a>
</li>
<li class="nav-item cta-nav d-none d-md-block hvr-pulse-grow">
Tickets
</li>
</ul>
<ul class="nav navbar-nav flex-row justify-content-center flex-nowrap nav-social">
<li class="nav-item mr-3"><a class="nav-link text-white" href="" target="_blank"><i class="fa fa-facebook"></i></a> </li>
<li class="nav-item mr-3"><a class="nav-link text-white" href="" target="_blank"><i class="fa fa-instagram"></i></a> </li>
<li class="nav-item"><a class="nav-link text-whit" href="" target="_blank"><i class="fa fa-youtube"></i></a> </li>
</ul>
</div>
</nav>
<!-- Navigation -->
<!-- Start Section -->
<section class="start-section">
<!-- XX1 -->
<div id="t1" class="tabcontent">
<div class="col-sm-8 offset-sm-2">
<h1>Titel</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<iframe style="margin-bottom:40px;" width="100%" height="600px" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>
<!-- XX1 END -->
<!-- XX2 -->
<div id="t2" class="tabcontent">
<div class="col-sm-8 offset-sm-2">
<h1>Was du wissen musst</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<iframe style="margin-bottom:40px;" width="100%" height="600px" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>
<!-- XX2 END -->
<!-- XX3 -->
<div id="t3" class="tabcontent">
<div class="col-sm-8 offset-sm-2">
<h1>Wann</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<iframe style="margin-bottom:40px;" width="100%" height="600px" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>
<!-- XX3 END -->
</section>
<!-- Start Section END -->
</body>
</html>

For reasons explained here position:sticky (Bootstrap sticky-top) doesn't provide an indication of when it's "stuck".
Therefore, you need to use JS to conditionally change the Navbar color/style.
One way is using an IntersectionObserver. You can use this on the #nav-anker which is the element immediately before the sticky-top Navbar.
(new IntersectionObserver(function(e,o){
if (e[0].intersectionRatio > 0){
document.documentElement.removeAttribute('class');
} else {
document.documentElement.setAttribute('class','stuck');
};
})).observe(document.querySelector('#nav-anker'));
So when the Navbar becomes sticky, the stuck class is added to it. You can have CSS styles that change when it's stuck...
/* style for when sticky is applied */
.stuck .sticky-top {
background: #000;
}
Demo: https://www.codeply.com/go/psiFbB6Ro6

You can simply override the color of all "nav" styles.
Even tho it's not recommended to use "!important", this will work here.
Otherwise you will need to set up the style of all parents till the nav bar ancestor or pass an ID to the nav bar.
EDIT: By checking the offset of the element to the topside (which is 0 if it is sticky) you can change the opacity to whatever value you want.
So if the offset to top is 0 you lower the opacity and if the offset is greater than 0 you simply revert the opacity back to 1.
/* Open tabs */
function openTab(evt, parameter) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(parameter).style.display = "block";
evt.currentTarget.className += " active";
}
/* Open tabs END */
/* Smooth scroll */
//Only where the class smooth-scroll is, scrolling is enabled
$(document).ready(function () {
$('a.smooth-scroll[href*="#"]:not([href="#three"])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
//Comment the following line if you don't want to see the anchor in the url
//target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
/* change opacity if nav is at top of the page */
var distance = $('nav').offset().top,
$window = $(window);
$window.scroll(function() {
if ( $window.scrollTop() >= distance ) {
$('nav').fadeTo(0.5, 0.2);
}else{
$('nav').fadeTo(0.5, 1);
}
});
});
/* Smooth scroll END */
/* Global */
* {
margin: 0px;
padding: 0px;
font-family: Roboto,
}
.separator {
height: 50px;
background-color: black;
}
/* Global END */
/* Navigation */
nav{
background-color: red !important;
}
/* Big Carousel */
.big-carousel .carousel-item {
/* viewport height */
height: 375px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.big-carousel .carousel-inner {
height: 375px;
}
.big-carousel .carousel-caption {
margin-bottom: 110px;
}
.big-carousel .carousel-caption a {
border: none;
background-color: rgba(255, 0, 77);
color: white;
padding: 20px;
border-radius: 1px;
}
.big-carousel .carousel-caption a:hover {
background: #EFFF00;
text-decoration: none;
color: black;
}
.big-carousel .carousel-indicators i {
font-size: 40px;
color: white;
margin-bottom: 100px;
}
/* Big Carousel END */
/* Navigation */
.navbar {
background-color: #020202;
border-radius: 0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
z-index: 1 !important;
}
.sticky-top {
background-color: rgba(0, 0, 0, 0.8);
}
.navbar-brand {
/*padding-left: 60px;*/
}
.navbar a {
color: #b6b9c1 !important;
}
.nav-social {
padding-right: 10px;
}
.nav-social i {
color: white;
}
.navbar .hvr-underline-from-center::before {
background: white;
height: 2px;
}
.navbar-toggler {
outline: none !important;
box-shadow: none;
border: none !important;
}
.navbar-toggler:focus,
.navbar-toggler:active {
outline: none !important;
box-shadow: none;
}
.cta-nav {
margin-top: 8px;
margin-bottom: 5px;
margin-left: 25px;
}
.cta-nav a {
background-color: rgba(255, 0, 77);
color: white !important;
padding: 10px;
border-radius: 1px;
}
.cta-nav a:hover {
background: #EFFF00;
text-decoration: none;
color: black !important;
}
#media (min-width: 1px) and (max-width: 576px) {
.navbar-brand {
padding-left: 7.5px;
}
.nav-social {
margin-left: 14px;
}
}
#media (min-width: 577px) and (max-width: 768px) {
.navbar-brand {
padding-left: 15px;
}
.nav-social {
margin-left: 14px;
}
}
#media (min-width: 769px) and (max-width: 992px) {
.navbar-brand {
padding-left: 25px;
}
.nav-social {
padding-right: 20px;
}
}
#media (min-width: 993px) and (max-width: 1200px) {
.navbar-brand {
padding-left: 50px;
}
.nav-social {
padding-right: 30px;
}
}
#media (min-width: 1201px) and (max-width: 9999px) {
.navbar-brand {
padding-left: 70px;
}
.nav-social {
padding-right: 50px;
}
}
/* Navigation END */
/* Tab content */
.tabcontent {
display: none;
color: black;
padding-top: 40px;
padding-bottom: 50px;
}
.tabcontent h1 {
text-align: center;
margin-bottom: 15px;
}
.tabcontent h2,
h3,
h4 {
text-align: center;
}
.tabcontent a {
text-decoration: none;
color: #719DE3;
padding-bottom: 2px;
}
.tabcontent p {
color: #121212;
}
.tabcontent {
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
/* Fading effect takes 1 second */
}
#-webkit-keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Tab content END */
/* Start Section 1 */
.start-section {
height: 100%;
background: #DAD299;
/* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #B0DAB9, #DAD299);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #B0DAB9, #DAD299);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background-attachment: fixed;
}
/* XX1 */
/* XX1 END*/
/* XX2 */
/* XX2 */
/* XX3 */
/* XX3 END */
/* Start Section END */
<!DOCTYPE html>
<html>
<!-- Meta head -->
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/all-css.css">
<!-- JQuery first -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="js/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<!-- Meta head END -->
<body id="top" onload="openTab(event, 't1');">
<!-- Big Carousel -->
<div class="big-carousel">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url(images/MG_9185.jpg)">
<div class="carousel-caption">
<h3>Titel</h3>
<p>Text</p>
<br>
<div class="hvr-pulse-grow cc-a d-md-none">
Tickets
</div>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image:">
<div class="carousel-caption">
<h3>Titel</h3>
<p>Text</p>
<br>
<div class="hvr-pulse-grow cc-a d-md-none">
Tickets
</div>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image:">
<div class="carousel-caption">
<h3>Titel</h3>
<p>Text</p>
<br>
<div class="hvr-pulse-grow cc-a d-md-none">
Tickets
</div>
</div>
</div>
</div>
<!-- Arrow left -->
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<!-- Arrow right -->
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- Big Carousel END -->
<!-- Navigation -->
<div id="nav-anker"></div>
<nav class="navbar navbar-dark navbar-expand-md sticky-top">
<img style="width: 45px;" src="">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar2" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbar2">
<ul class="navbar-nav mx-auto text-center">
<li class="nav-item">
<a style="cursor:pointer;" class="smooth-scroll nav-link" href="#nav-anker" onclick="openTab(event, 't1')"><span class="hvr-underline-from-center">Die Tour</span></a>
</li>
<li class="nav-item">
<a style="cursor:pointer;" class="smooth-scroll nav-link" href="#nav-anker" onclick="openTab(event, 't2')"><span class="hvr-underline-from-center">Vorbereitung</span></a>
</li>
<li class="nav-item">
<a style="cursor:pointer;" class="smooth-scroll nav-link" href="#nav-anker" onclick="openTab(event, 't3')"><span class="hvr-underline-from-center">Termine & Städte</span></a>
</li>
<li class="nav-item cta-nav d-none d-md-block hvr-pulse-grow">
Tickets
</li>
</ul>
<ul class="nav navbar-nav flex-row justify-content-center flex-nowrap nav-social">
<li class="nav-item mr-3"><a class="nav-link text-white" href="" target="_blank"><i class="fa fa-facebook"></i></a> </li>
<li class="nav-item mr-3"><a class="nav-link text-white" href="" target="_blank"><i class="fa fa-instagram"></i></a> </li>
<li class="nav-item"><a class="nav-link text-whit" href="" target="_blank"><i class="fa fa-youtube"></i></a> </li>
</ul>
</div>
</nav>
<!-- Navigation -->
<!-- Start Section -->
<section class="start-section">
<!-- XX1 -->
<div id="t1" class="tabcontent">
<div class="col-sm-8 offset-sm-2">
<h1>Titel</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<iframe style="margin-bottom:40px;" width="100%" height="600px" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>
<!-- XX1 END -->
<!-- XX2 -->
<div id="t2" class="tabcontent">
<div class="col-sm-8 offset-sm-2">
<h1>Was du wissen musst</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<iframe style="margin-bottom:40px;" width="100%" height="600px" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>
<!-- XX2 END -->
<!-- XX3 -->
<div id="t3" class="tabcontent">
<div class="col-sm-8 offset-sm-2">
<h1>Wann</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<iframe style="margin-bottom:40px;" width="100%" height="600px" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>
<!-- XX3 END -->
</section>
<!-- Start Section END -->
</body>
</html>

Related

How to change the color of the header when scrolling down the page?

The site has several sections. The first one with a picture, on it header should be transparent. The following blocks are colored and on them the header must take the color of the block. How can I achieve this?
I wrote code to change the header from transparent to the color of the second block, but I think there is a better solution than writing this for each block, but I can't find it.
$(function() {
let header = $('.header'),
intro = $('.intro');
$(window).scroll(function() {
if ($(this).scrollTop() > intro.outerHeight()) {
header.addClass('header_filled');
} else {
header.removeClass('header_filled');
}
});
});
*,
*::before,
*::after {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
a {
text-decoration: none;
}
body {
margin: 0;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
line-height: 1.6;
color: #fff;
}
/* Animations */
/* Container */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
/* Header */
.header {
width: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
}
.header__logo {
font-size: 30px;
font-weight: 700;
color: #fff;
}
.header__inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.header_filled {
background-color: #3ebb46;
border-radius: 0 0 20px 20px;
transition: .2s ease-in;
}
/* Intro */
.intro {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100vh;
background: url("../img/intro.jpg") center no-repeat;
background-size: cover;
font-size: 20px;
}
.intro__inner {
margin: 0 auto;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
border: 1px solid #fff;
border-radius: 30px;
}
.intro__title {
font-size: 72px;
text-align: center;
}
.intro__subtitle {
font-family: 'Jost', sans-serif;
text-transform: uppercase;
font-size: 36px;
text-align: center;
}
/* Navigation */
.nav {
display: flex;
font-size: 15px;
font-weight: 500;
text-transform: uppercase;
}
.nav__link {
color: #fff;
padding: 0 10px;
}
.nav__link:hover {
color: #ffffff;
background-color: #0d7711;
border-radius: 10px;
}
/* About */
.about {
background-color: #3ebb46;
width: 100%;
height: 100vh;
padding: 60px 0;
color: #fff;
font-size: 20px;
}
.about__title {
background-color: #61c467;
text-align: center;
border-radius: 10px;
}
.about__text {
text-align: justify;
}
.about__link {
font-size: 21px;
font-weight: 700;
color: #6868d8;
text-decoration: wavy;
padding: 0 2px 0 2px;
}
.about__link:hover {
text-decoration: none;
color: #3ebb46;
background-color: #fff;
border-radius: 5px;
transition: .1s ease-in;
}
/* Servives */
.services {
background-color: #48daae;
width: 100%;
height: 100vh;
padding: 60px 0;
color: #fff;
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Jost&display=swap" rel="stylesheet">
<header class="header" id="header">
<div class="container">
<div class="header__inner" id="header">
<a href="#main">
<div class="header__logo">CottageKarelia</div>
</a>
<nav class="nav">
<a class="nav__link" href="#main">Главная</a>
<a class="nav__link" href="#about">О компании</a>
<a class="nav__link" href="#services">Услуги</a>
<a class="nav__link" href="#">Отдых в Карелии</a>
<a class="nav__link" href="#">Владельцам</a>
<a class="nav__link" href="#">Оплата</a>
<a class="nav__link" href="#">Контакты</a>
</nav>
</div>
</div>
</header>
<div class="intro" id="main">
<div class="container">
<div class="intro__inner">
<h1 class="intro__title">Гостевые дома и коттеджи Карелии</h1>
<br>
<h2 class="intro__subtitle">Простой выбор для Вашего отдыха!</h2>
</div>
</div>
</div>
<section class="about" id="about">
<div class="container">
<div class="about__title">
<h1>О деятельности компании</h1>
</div>
<div class="about__text">
<p>
Наш сайт является крупнейшим <a class="about__link" href="catalog.html">каталогом</a> гостевых домов и коттеджей в Карелии, на котором собрано более 1000 позиций. Здесь Вы сможете найти любой дом, соответствующий всем Вашим потребностям. Благодаря
удобной форме поиска, Вы наиболее полно сможете охарактеризовать, что именно Вам необходимо, после чего, Вам будут представлены наиболее подходящие дома. Когда Вы определитесь с выбором дома, Вам будет предложено забронировать его, после чего
и начнется Ваш отдых! Кроме того, мы с радостью предлагаем гостям Карелии различные туры, созданные для абсолютно любой категории людей.
</p>
<p>
Наши менеджеры свяжутся с Вами и узнают все Ваши пожелания, после чего они сформируют Вам тур: определят наиболее предпочтительные и удобные варианты проезда, сообщат о дополнительных возможностях на территории выбранного места или тура, посоветуют достопримечательности
Карелии, которые можно будет посетить неподалеку от выбранного дома, предложат Вам трансфер с вокзала к гостевому дому или коттеджу и обратно. Иными словами, за Вас сделают все и обеспечат Вам лучший отдых на земле в райском уголке, по имени Карелия!
</p>
</div>
</div>
</section>
<section class="services" id="services">
<div class="container">
<div class="services__title">
<h1>Дополнительные услуги</h1>
</div>
</div>
</section>
In order to determine wether the header block is above any of your blocks that change its color, you need to check if the header position + height "touches" the top edge of the element. After that you can simply apply the background color of the "touched" element to your header.
$(window).scroll(function(){
var $header = $(".header");
var header_position = $header.offset().top;
var header_height = $header.outerHeight();
$('.header-color').each(function(){
var color_block_position = $(this).offset().top;
if (header_position + header_height >= color_block_position) {
$header.css({
'background-color': $(this).css('background-color')
});
}
});
});
.header {
background-color: #CECECE;
font-size: 2em;
padding: 1em;
width: 100%;
position: fixed;
top: 0;
left: 0;
border: 1px solid red;
}
.header-color {
padding: 1em;
border: 1px solid red;
}
.transparent-background {
background-color: transparent;
}
.yellowgreen-background {
background-color: yellowgreen;
}
.orangered-background {
background-color: orangered;
}
.blue-background {
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
HEADER
</div>
<br><br><br><br><br><br><br>
<div class="header-color transparent-background">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="header-color yellowgreen-background">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="header-color orangered-background" >
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="header-color blue-background">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

jQuery: Show sidebar, push off main area

This is my code:
$(".left-area").mouseenter(function() {
$(".left-area-content").show();
$(".left-area-content-preview").hide();
}).mouseleave(function() {
$(".left-area-content").hide();
$(".left-area-content-preview").show();
});
$(".right-area").mouseenter(function() {
$(".right-area-content").show();
$(".right-area-content-preview").hide();
}).mouseleave(function() {
$(".right-area-content").hide();
$(".right-area-content-preview").show();
});
* {
font-size: 30px;
font-family: Arial;
}
body {
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
overflow: hidden;
}
.content {
display: flex;
height: 100vh;
overflow-y: scroll;
}
.left-area {
background-color: red;
color: white;
}
.left-area-content-preview {
display: block;
}
.left-area-content {
display: none;
width: 500px;
}
.main-area {
width: 100%;
}
.right-area {
background-color: red;
color: white;
}
.right-area-content {
width: 500px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<div class="left-area">
<div class="left-area-content-preview">
One
</div>
<div class="left-area-content">
Some cool content
</div>
</div>
<div class="main-area">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
<div class="right-area">
<div class="right-area-content-preview">
Two
</div>
<div class="right-area-content">
Some cool content
</div>
</div>
</div>
I would need something like this:
http://www.laurelhalo.com/
The main area should keep its width while hovering one of the two sidebars, and push off on one side. There also should be a sliding animation, like in the example.
How is it possible to realize that? Is it possible with jQuery?
Would be very thankful for help. :)
Just add min-width:100%; to your main-area class.
$(".left-area").mouseenter(function() {
$(".left-area-content").show();
$(".left-area-content-preview").hide();
}).mouseleave(function() {
$(".left-area-content").hide();
$(".left-area-content-preview").show();
});
$(".right-area").mouseenter(function() {
$(".right-area-content").show();
$(".right-area-content-preview").hide();
}).mouseleave(function() {
$(".right-area-content").hide();
$(".right-area-content-preview").show();
});
* {
font-size: 30px;
font-family: Arial;
}
body {
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
overflow: hidden;
}
.content {
display: flex;
height: 100vh;
overflow-y: scroll;
}
.left-area {
background-color: red;
color: white;
}
.left-area-content-preview {
display: block;
}
.left-area-content {
display: none;
width: 500px;
}
.main-area {
width: 100%;
min-width:100%;
}
.right-area {
background-color: red;
color: white;
}
.right-area-content {
width: 500px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<div class="left-area">
<div class="left-area-content-preview">
One
</div>
<div class="left-area-content">
Some cool content
</div>
</div>
<div class="main-area">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
<div class="right-area">
<div class="right-area-content-preview">
Two
</div>
<div class="right-area-content">
Some cool content
</div>
</div>
</div>

Custom scrollbar with flexible, expanding track around the thumb like a gravitational lens

I want to implement a custom scrollbar with a flexible track that expands around the thumb using CSS. I try to achieve something like a gravitational lens effect, as if the thumb (red dot) warps the space around it (see the picture below). The gravitational lens shall move with the thumb.
How can I do that?
First: It's possible to build the scrollbar just with HTML and CSS but for the usage you need Javascript.
Simple scrollbar
You can achieve the look with position, border and border-radius. The track gets the border on the left and the right side, the thumb gets it on all sides with a border-radius: 50% and additionally a white mask (with the width of the track minus its borders) for hiding the thumb borders inside the track. Of course you need also the red dot. All five elements get a position: absolute.
<div id="scrollbar">
<div id="track"></div>
<div id="thumb">
<div class="white_mask"></div>
<div id="red_dot"></div>
</div>
</div>
Basic CSS (without dimensions)
#scrollbar {
position: absolute;
}
#track {
position: absolute;
border-right: 3px solid #000;
border-left: 3px solid #000;
}
#thumb {
position: absolute;
border: 1px solid #000;
border-radius: 50%;
background-color: white;
}
.white_mask {
position: absolute;
background-color: white;
}
#red_dot {
position: absolute;
border-radius: 50%;
background-color: #9c0000;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#container {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
#scrollbar {
position: absolute;
right: 100px;
top: 0;
width: 120px;
height: 100%;
z-index: 10;
}
#track {
position: absolute;
top: 0;
right: 20px;
width: 80px;
height: 100%;
border-right: 12px solid #000;
border-left: 12px solid #000;
}
#thumb {
position: absolute;
top: 0;
right: 0;
width: 120px;
height: 128px;
border: 4px solid #000;
border-top: 8px solid #000;
border-bottom: 8px solid #000;
border-radius: 50%;
background-color: white;
}
.white_mask {
position: absolute;
top: -8px;
right: 28px;
width: 56px;
height: 128px;
background-color: white;
}
.white_mask.big {
top: -16px;
right: 12px;
width: 88px;
height: 144px;
}
#thumb_mask {
position: absolute;
top: -16px;
left: 8px;
width: 96px;
height: 144px;
overflow: hidden;
}
.quarter_border {
position: absolute;
width: 80px;
height: 100px;
border-right: 12px solid #000;
border-left: 12px solid #000;
border-radius: 50%;
background-color: white;
}
.quarter_border.top {
top: -52px;
}
.quarter_border.right {
right: -60px;
}
.quarter_border.bottom {
bottom: -52px;
}
.quarter_border.left {
left: -60px;
}
#red_dot {
position: absolute;
top: 0;
left: 0;
width: 112px;
height: 112px;
border: 8px solid white;
border-radius: 50%;
background-color: #9c0000;
}
<div id="container">
<div id="scrollbar">
<div id="track"></div>
<div id="thumb">
<div class="white_mask"></div>
<div id="red_dot"></div>
</div>
</div>
</div>
Advanced scrollbar
Since there are small corners where thumb and track meet each other you can add four additional divs with rounded borders in a masking div with overflow: hidden so that just a quarter of the four divs is visible. You need also a second white mask under the four divs to hide the corners.
For increasing and decreasing the border-width you need to define different values for top/bottom border and left/right border. Furthermore the red dot needs a white border for smoothing the inside of the thumb border.
<div id="scrollbar">
<div id="track"></div>
<div id="thumb">
<div class="white_mask"></div>
<div class="white_mask small"></div>
<div id="thumb_mask">
<div class="quarter_border top right"></div>
<div class="quarter_border bottom right"></div>
<div class="quarter_border top left"></div>
<div class="quarter_border bottom left"></div>
</div>
<div id="red_dot"></div>
</div>
</div>
Additional CSS (without dimensions)
#thumb {
...
border-top: 2px solid #000;
border-bottom: 2px solid #000;
}
#thumb_mask {
position: absolute;
overflow: hidden;
}
.quarter_border {
position: absolute;
border-right: 3px solid #000;
border-left: 3px solid #000;
border-radius: 50%;
background-color: white;
}
#red_dot{
...
border: 2px solid white;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#container {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
#scrollbar {
position: absolute;
right: 100px;
top: 0;
width: 120px;
height: 100%;
z-index: 10;
}
#track {
position: absolute;
top: 0;
right: 20px;
width: 80px;
height: 100%;
border-right: 12px solid #000;
border-left: 12px solid #000;
}
#thumb {
position: absolute;
top: 0;
right: 0;
width: 120px;
height: 128px;
border: 4px solid #000;
border-top: 8px solid #000;
border-bottom: 8px solid #000;
border-radius: 50%;
background-color: white;
}
.white_mask {
position: absolute;
top: -4px;
right: 28px;
width: 56px;
height: 128px;
background-color: white;
}
.white_mask.big {
top: -16px;
right: 12px;
width: 88px;
height: 144px;
}
#thumb_mask {
position: absolute;
top: -16px;
left: 8px;
width: 96px;
height: 144px;
overflow: hidden;
}
.quarter_border {
position: absolute;
width: 80px;
height: 100px;
border-right: 12px solid #000;
border-left: 12px solid #000;
border-radius: 50%;
background-color: white;
}
.quarter_border.top {
top: -52px;
}
.quarter_border.right {
right: -60px;
}
.quarter_border.bottom {
bottom: -52px;
}
.quarter_border.left {
left: -60px;
}
#red_dot {
position: absolute;
top: 0;
left: 0;
width: 112px;
height: 112px;
border: 8px solid white;
border-radius: 50%;
background-color: #9c0000;
}
<div id="container">
<div id="scrollbar">
<div id="track"></div>
<div id="thumb">
<div class="white_mask"></div>
<div class="white_mask big"></div>
<div id="thumb_mask">
<div class="quarter_border top right"></div>
<div class="quarter_border bottom right"></div>
<div class="quarter_border top left"></div>
<div class="quarter_border bottom left"></div>
</div>
<div id="red_dot"></div>
</div>
</div>
</div>
Unfortunately the quarters don't fit perfectly to thumb and track. So it could be a better approach to build the scrollbar as SVG and manipulate its components instead.
Basic Javascript
There are many possibilities and features to manipulate the scrollbar with different properties like top, scrollTop or transform. I use here for demonstration only top and some basic features (for example I omitted the adjustment of the scrollposition on resize).
Basic constants
For getting the scrollbar to work first you need three constants thumb_height (incl. its borders), scroll_range (maximum thumb position) and diff_height (hidden content).
const thumb_height = thumb.getBoundingClientRect().height;
const scroll_range = window.innerHeight - thumb_height;
const diff_height = content.scrollHeight - window.innerHeight
Scroll function
Then you need the scroll function where you calculate the new thumb position and the content scroll and style both elements if the thumb is in the scroll range.
The content scroll is the visible percentage of the initial hidden content. The percentage is calculated with: thumb position divided by its maximum, the scroll range.
For dragging the thumb:
You get the thumb position from the mouse cursor position in the mousedown event: e.clientY (corrected by the half of the thumb height).
You also have to make sure that the thumb doesn't disappear when the thumb position gets too small or too big, for example when leaving the container (here the window). Therefor you have to check if the position is lower than 0 or higher than the scroll range and style the elements only if not.
function dragThumb(e) {
const thumb_pos = e.clientY - (thumb_height / 2);
const content_scroll = -diff_height * thumb_pos / scroll_range;
if (thumb_pos >= 0 && thumb_pos <= scroll_range) {
thumb.style.top = thumb_pos + 'px';
content.style.top = content_scroll + 'px';
}
}
For mouse wheel:
You get the thumb position from the actual top property of the thumb increased or decreased (depending on the mouse wheel direction in the wheel event: e.deltaY) by the fixed amount 100 (you can modify the value to scroll faster or slower).
For the styling you additionally have to handle the two extreme conditions because the thump position (calculated with the fixed amount) sometimes doesn't "land" exactly on 0 or the scroll range. You could do this with if blocks like in dragThumb() (you would need 3) or you could use ternary operators ? : like in the following code snippet.
function scrollContent(e) {
const thumb_pos = parseInt(thumb.style.top) + (e.deltaY < 0 ? -100 : 100);
const content_scroll = -diff_height * thumb_pos / scroll_range;
thumb.style.top = thumb_pos < 0 ? 0 : (thumb_pos > scroll_range ? scroll_range : thumb_pos) + 'px';
content.style.top = thumb_pos < 0 ? 0 : (thumb_pos > scroll_range ? -diff_height : content_scroll) + 'px';
}
Event listener
Last you need an event listener where you call the scroll function.
For the mouse wheel:
document.addEventListener('wheel', scrollContent);
For dragging the thumb:
You need two additional event listeners, one for listening for the mouse move only if the thumb is initially clicked, and one for removing that mouse move listener if the mouse button is released.
thumb.addEventListener('mousedown', function(e) {
e.preventDefault(); // fixed a bug with 'mouseup'
document.addEventListener('mousemove', dragThumb);
});
document.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', dragThumb);
});
Working example:
Both scroll functions are merged into the function scrollContent(). The thumb position is calculated in the two event handlers (which call scrollContent()): dragThumb() and the anonymous function for the wheel event.
The three constants are calculated in a reset function resetScroll() (and therefor defined as ordinary vars with let) that is called on page load and window resize. That function also calles the scroll function scrollContent() with the actual thumb position.
Because the event listener for mouseup is "deaf" if the event happens outside the stack snippet, i converted its anonymous function in a function stopDrag() that is called as event handler for mouseup and mouseleave.
document.addEventListener('DOMContentLoaded', function() {
const thumb = document.getElementById('thumb');
const content = document.getElementById('content');
let thumb_height, scroll_range, diff_height;
function resetScroll() {
thumb_height = thumb.getBoundingClientRect().height;
scroll_range = window.innerHeight - thumb_height;
diff_height = content.scrollHeight - window.innerHeight;
scrollContent(parseInt(thumb.style.top));
}
function scrollContent(thumbPos) {
const newScroll = -diff_height * thumbPos / scroll_range;
thumb.style.top = thumbPos < 0 ? 0 : (thumbPos > scroll_range ? scroll_range : thumbPos) + 'px';
content.style.top = thumbPos < 0 ? 0 : (thumbPos > scroll_range ? -diff_height : newScroll) + 'px';
}
function dragThumb(e) {
scrollContent(e.clientY - (thumb_height / 2));
}
function stopDrag(e) {
document.removeEventListener('mousemove', dragThumb);
}
thumb.addEventListener('mousedown', function(e) {
e.preventDefault();
document.addEventListener('mousemove', dragThumb);
});
document.addEventListener('mouseup', stopDrag);
document.addEventListener("mouseleave", stopDrag);
document.addEventListener('wheel', function(e) {
if (!e.ctrlKey) {
scrollContent(parseInt(thumb.style.top) + (e.deltaY < 0 ? -100 : 100));
}
});
window.addEventListener('resize', resetScroll);
//initial reset
document.scrollTop = 0;
thumb.style.top = 0;
resetScroll();
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#container {
position: relative;
overflow: hidden;
}
#content {
position: relative;
top: 0;
right: 0;
width: 100vw;
height: 100vh;
padding-right: 40px;
}
#scrollbar {
position: absolute;
right: 5px;
top: 0;
width: 30px;
height: 100%;
z-index: 10;
}
#track {
position: absolute;
top: 0;
right: 5px;
width: 20px;
height: 100%;
border-right: 3px solid #000;
border-left: 3px solid #000;
}
#thumb {
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 32px;
border: 1px solid #000;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
border-radius: 50%;
background-color: white;
}
.white_mask {
position: absolute;
top: -3px;
right: 6px;
width: 14px;
height: 30px;
background-color: white;
}
.white_mask.big {
top: -4px;
right: 3px;
width: 22px;
height: 36px;
}
#thumb_mask {
position: absolute;
top: -4px;
left: 2px;
width: 24px;
height: 36px;
overflow: hidden;
}
.quarter_border {
position: absolute;
width: 20px;
height: 25px;
border-right: 3px solid #000;
border-left: 3px solid #000;
border-radius: 50%;
background-color: white;
}
.quarter_border.top {
top: -13px;
}
.quarter_border.right {
right: -15px;
}
.quarter_border.bottom {
bottom: -13px;
}
.quarter_border.left {
left: -15px;
}
#red_dot {
position: absolute;
top: 0;
left: 0;
width: 28px;
height: 28px;
border: 2px solid white;
border-radius: 50%;
background-color: #9c0000;
}
<div id="container">
<div id="scrollbar">
<div id="track"></div>
<div id="thumb">
<div class="white_mask"></div>
<div class="white_mask big"></div>
<div id="thumb_mask">
<div class="quarter_border top right"></div>
<div class="quarter_border bottom right"></div>
<div class="quarter_border top left"></div>
<div class="quarter_border bottom left"></div>
</div>
<div id="red_dot"></div>
</div>
</div>
<div id="content">
<p>first</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>last</p>
</div>
</div>

Too much text for overflow:hidden

I have a quite complex div layout.
It works on Safari and Firefox without any problem:
But opening the page on chrome gives me the following result:
So the whole screen is divided into two big divs that are placed vertically. The one at the top with the orange dots and the other one at the bottom with the colorful divs inside.
When I add too much text to the pink div the layout starts expanding itself.
The interesting thing is that the div is gets more text than it could show and it really works because of
overflow: hidden;
But starting at a quite high number of lines the div starts expanding itself for some reason
I was trying to reproduce the issue in fiddle.
But I am not able to.
What else could I try to find the problem?
Or does anyone see the mistake I did?
The code I give is for the half at the bottom were the problem probably is.
HTML:
<div class="ThirdSectionTextArea">
<div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell1">
</div>
<div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell2">
<div class="Row Row1 uppercase">
<div class="cell cell1">
SOME HEADERTEXT
</div>
<div class="cell cell2">
SOME HEADERTEXT
</div>
<div class="cell cell3">
SOME HEADERTEXT
</div>
</div>
<div class="Row Row2">
<div class="cell cell1">
<table class="layoutTable"><tr><td class="centerDiv">
<div class="h_line">
</div>
</td></tr></table>
</div>
<div class="cell cell2">
<table class="layoutTable"><tr><td class="centerDiv">
<div class="h_line">
</div>
</td></tr></table>
</div>
<div class="cell cell3">
<table class="layoutTable"><tr><td class="centerDiv">
<div class="h_line">
</div>
</td></tr></table>
</div>
</div>
<div class="Row Row3">
<div class="cell cell1">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="cell cell2">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="cell cell3">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</div>
<div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell3">
</div>
</div>
<div class="ThirdSectionBottomLayout">
<table class="layoutTable"><tr><td class="centerDiv">
<img src="../img/basics/Pfeil.png" alt="Pfeil" class="ThirdSectionBottomArrow">
</td></tr></table>
</div>
CSS:
.ThirdSectionTextArea {
width:250px;;
height:180px;
background-color: aqua;
}
.ThirdSectionBottomLayout {
width:100%;
height:15%;
background-color: chartreuse;
position:relative;
}
.ThirdSectionBottomArrow {
top:-0%;
height:100%;
width:5%;
object-fit:scale-down;
position: absolute;
}
.ThirdSectionTextAreaCell {
float:left;
overflow: hidden;
text-align: left !important;
height:100%;
}
.ThirdSectionTextAreaCell1{
background-color: aqua;
width: 20%;
}
.ThirdSectionTextAreaCell2{
background-color: fuchsia;
width: 60%;
}
.ThirdSectionTextAreaCell3{
background-color: darkorchid;
width: 20%;
}
.ThirdSectionTextAreaCell2 .Row {
width:100%;
}
.ThirdSectionTextAreaCell2 .Row1 {
background-color: burlywood;
height:20%;
}
.ThirdSectionTextAreaCell2 .Row1 .cell{
width:33.33%;
height:100%;
float:left;
overflow: scroll;
background-color: burlywood;
}
.ThirdSectionTextAreaCell2 .Row2 {
background-color: deepskyblue;
height: 3%;
}
.ThirdSectionTextAreaCell2 .Row2 .cell{
width:33.33%;
height:100%;
float:left;
overflow: scroll;
}
.ThirdSectionTextAreaCell2 .Row3 {
background-color: deeppink;
height:77%;
}
.ThirdSectionTextAreaCell2 .Row3 .cell{
width:33.33%;
height:100%;
float:left;
overflow: hidden;
}

Making Sidebar with bootstrap3

I wanna make sidebar like this http://dota2.cyborgmatt.com/prizetracker/dotapits3
but couldn't do it. Everytime I tried and failed. You can click to sidebar text and it can open to you at right side section.
I'm new kinda things thank you.
I created a sidebar for bootstrap, because i didn't find what i searched for on internet, here's the code
CSS
#wrapper {
margin-left: 200px;
}
#sidebar-wrapper {
width: 200px;
background: #555;
height: 100%;
position: fixed;
left: 0;
top: 0;
}
#sidebar-wrapper .logo {
text-transform: uppercase;
color: #FFF;
text-align: center;
padding: 15px 0;
font-size: 36px;
font-weight: bold;
border-bottom: 1px solid #666;
}
#sidebar-wrapper .nav.nav-pills.nav-stacked {
margin-top: 30px;
}
#sidebar-wrapper .nav.nav-pills.nav-stacked li {
}
#sidebar-wrapper .nav.nav-pills.nav-stacked li a {
color: #FFF;
}
#sidebar-wrapper .nav.nav-pills.nav-stacked li a:hover {
background: #333;
}
**HTML**
<div id="sidebar-wrapper">
<div class="logo">
LOGO
</div>
<ul class="nav nav-pills nav-stacked">
<li><span class="glyphicon glyphicon-th-list"></span> Produits</li>
<li><span class="glyphicon glyphicon-user"></span> Clients</li>
<li><span class="glyphicon glyphicon-calendar"></span> Réservations</li>
<li><span class="glyphicon glyphicon-shopping-cart"></span> Commandes</li>
<li><span class="glyphicon glyphicon-envelope"></span> Messages</li>
</ul>
</div>
Here's an example of the result in this Bootply
If you're already using Bootstrap you can use the baked in components. Take a look at http://getbootstrap.com/components/#nav and you are ready to go. Also you can analyze the code used in your example and look up how it's done. It's pretty straightforward.
EDIT: I fiddled something: http://jsfiddle.net/Ltyuxy7h/6/
<div class="row">
<div class="col-xs-2">
<ul class="nav>
<li>Testlink</li>
<li>Testlink</li>
<li>Testlink</li>
<li>Testlink</li>
<li>Testlink</li>
<li>Testlink</li>
</ul>
</div>
<div class="col-xs-10">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>

Categories

Resources