When trying to make my slick slider responsive I get a problem with a whitespace between my content/sliding element and dots that I can't remove. When viewing the page on full screen (non responsive view), the dots are gone (I know why, and that's good), the whitespace is gone, but my arrows are in my content. Here is an image (N & O are the arrows, css is temporary missing):
whitespace problem:
arrows problem:
HTML CODE:
<section class="o-container u-mt-x2 u-bgcolor-white">
<div class="o-grid">
<div class="o-grid__col u-12/12">
<section class="o-container u-mt-x12">
<div class="c-card u-mb-x0">
<div class="o-container">
<div class="o-grid">
<div class="o-grid__col u-12/12 u-12/12#lg u-mb-x6 u-text-center"><h2
class=" u-text-center u-color-blue">Weitere Funktionen fur Anbieter</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod.</p>
</div>
</div>
</div>
<div class="o-grid__col u-12/12 u-mb-x6 o-grid--equal-height">
<div class="c-funcslider slick-slider">
<div style="height: 328px; text-align: center;">
<div class="c-card c-card--bigborder u-bgcolor-white u-text-center"
style="display: inline-block;">
<div class="c-card__body u-pt-x5 u-p-x5">
<h4 class="h4">Logenplätze buchen</h4>
<p class="u-color-slate-gray">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>
<h3 class="h3">ab 30 €* / Woche</h3>
</div>
</div>
</div>
<div style="height: 328px; text-align: center;">
<div class="c-card c-card--bigborder u-bgcolor-white u-text-center"
style="display: inline-block;">
<div class="c-card__body u-pt-x5 u-p-x5">
<h4 class="h4">Logenplätze buchen</h4>
<p class="u-color-slate-gray">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>
<h3 class="h3">ab 30 €* / Woche</h3>
</div>
</div>
</div>
<div style="height: 348px; text-align: center;">
<div class="c-card c-card--bigborder u-bgcolor-white u-text-center"
style="display: inline-block;">
<div class="c-card__body u-pt-x5 u-p-x5">
<h4 class="h4">Logenplätze buchen</h4>
<p class="u-color-slate-gray">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>
<h3 class="h3">ab 30 €* / Woche</h3>
</div>
</div>
</div>
<div style="height: 348px; text-align: center;">
<div class="c-card c-card--bigborder u-bgcolor-white u-text-center"
style="display: inline-block;">
<div class="c-card__body u-pt-x5 u-p-x5">
<h4 class="h4">Logenplätze buchen</h4>
<p class="u-color-slate-gray">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>
<h3 class="h3">ab 30 €* / Woche</h3>
</div>
</div>
</div>
<div style="height: 348px; text-align: center;">
<div class="c-card c-card--bigborder u-bgcolor-white u-text-center"
style="display: inline-block;">
<div class="c-card__body u-pt-x5 u-p-x5">
<h4 class="h4">Logenplätze buchen</h4>
<p class="u-color-slate-gray">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>
<h3 class="h3">ab 30 €* / Woche</h3>
</div>
</div>
</div>
</div>
</div>
<div class="o-container">
<div class="o-grid__col u-12/12 u-12/12#lg u-text-center "><p
class="p-mini text-center">
* 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.</p>
</div>
</div>
</div>
</section>
</div>
</div>
</section>
CSS:
/* Slider */
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
&:focus {
outline: none;
}
&.dragging {
cursor: pointer;
cursor: hand;
}
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
margin-left: auto;
margin-right: auto;
max-width: fixed;
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
.slick-loading & {
visibility: hidden;
}
}
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
[dir="rtl"] & {
float: right;
}
img {
display: block;
}
&.slick-loading img {
display: none;
}
display: none;
&.dragging img {
pointer-events: none;
}
.slick-initialized & {
display: block;
}
.slick-loading & {
visibility: hidden;
}
.slick-vertical & {
display: block;
height: auto;
border: 1px solid transparent;
}
}
.slick-arrow.slick-hidden {
display: none;
}
JS:
if ($('.c-funcslider').length > 0) {
$('.c-funcslider').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
arrows: false
}
}
]
});
}
I would say I need to edit it in my css or html but already tried a lot of things in those 2 files..
Thanks in advance!
Related
I looked at some articles on the internet but I couldn't find what I wanted. After the site loads for the first time, when I scroll and scroll to a paragraph, I want the text to scroll from the bottom and come after 1 second.Like on this site:https://www.armoli.com/.
For example I want to apply it here
<h6 style="margin-right: 70px;" class="section-title text-center">Our Solutions</h6>
<h6 style="margin-right: 120px;" class="section-subtitle text-center mb-5 pb-3">We offer efficient, high performance and guaranteed solutions with our experienced team having strong references</h6>
<div class="solutionout1">
<img class="solu" style="height:80px ;" src="assets/imgs/webdevelop.png" alt="web development logo" >
<div ><p class="solutionhead">Web Development</p><p class="solutiontext">
We offer fast, profitable, safe and effective solutions in the light of the latest innovations to those who entrust us with their companies' showcases in the internet world.</p></div>
</div>
HTML, CSS, and JavaScript scroll reveal animations
window.addEventListener('scroll', reveal);
function reveal(){
var reveals = document.querySelectorAll('.reveal');
for(var i = 0; i < reveals.length; i++){
var windowheight = window.innerHeight;
var revealtop = reveals[i].getBoundingClientRect().top;
var revealpoint = 150;
if(revealtop < windowheight - revealpoint){
reveals[i].classList.add('active');
}
else{
reveals[i].classList.remove('active');
}
}
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #1D212B;
}
section{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section:nth-child(1){
color: #fff;
}
section:nth-child(2){
color: #1D212B;
background: #fff;
}
section:nth-child(3){
color: #fff;
}
section:nth-child(4){
color: #1D212B;
background: #fff;
}
section .container{
margin: 100px;
}
section h1{
font-size: 60px;
}
section h2{
font-size: 40px;
text-align: center;
text-transform: uppercase;
}
section .cards{
display: flex;
}
section .cards .text-card{
background: #2696E9;
margin: 20px;
padding: 20px;
}
section .cards .text-card h3{
font-size: 30px;
text-align: center;
text-transform: uppercase;
margin-bottom: 10px;
}
#media (max-width: 900px){
section h1{
font-size: 40px;
}
section .cards{
flex-direction: column;
}
}
.reveal{
position: relative;
transform: translateY(150px);
opacity: 0;
transition: all 2s ease;
}
.reveal.active{
transform: translateY(0px);
opacity: 1;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Reveal</title>
</head>
<body>
<section>
<h1>Reveal Elements On Scroll</h1>
</section>
<section>
<div class="container reveal">
<h2>Your Title</h2>
<div class="cards">
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</section>
<section>
<div class="container reveal">
<h2>Your Title</h2>
<div class="cards">
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</section>
<section>
<div class="container reveal">
<h2>Your Title</h2>
<div class="cards">
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</section>
</body>
</html>
const intersectionCallback = (entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
let elem = entry.target;
if (entry.intersectionRatio >= 0.75) {
elem.classList.add("animate");
}
}
});
};
const Animateditems = document.querySelectorAll("div.text");
let options = {
threshold: 1.0,
};
let observer = new IntersectionObserver(intersectionCallback, options);
Animateditems.forEach((item) => {
observer.observe(item);
});
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
html {
font-size: 66.6%;
}
.scrolldown {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
h1 {
font-size: 3rem;
}
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
gap: 2rem;
}
.flex-container > div {
flex: 1 1 100%;
border: 0.1rem solid black;
padding: 2rem;
margin: 2rem;
}
.flex-container > div.animate p {
animation: fadeIn 2s;
opacity: 1;
}
.flex-container > div.animate h2 {
animation: fadeIn 2s;
opacity: 1;
}
.flex-container > div h2 {
font-size: 2.5rem;
opacity: 0;
transform: translateY(0rem);
}
.flex-container > div p {
font-size: 1.8rem;
opacity: 0;
}
#media screen and (min-width: 650px) {
.flex-container > div {
flex: 1 1 40%;
border: 0.1rem solid black;
}
}
#keyframes fadeIn {
from {
transform: translateY(2rem);
opacity: 0;
}
to {
transform: translateY(0rem);
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>animation</title>
</head>
<body>
<div class="scrolldown"><h1>scroll down</h1></div>
<div class="flex-container">
<div class="text">
<h2>This is a title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel
inventore, aut id laboriosam reprehenderit consectetur? Praesentium,
aperiam corporis. Iste asperiores molestiae, itaque a minus dicta! Id
omnis suscipit iure illum.
</p>
</div>
<div class="text">
<h2>This is a title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel
inventore, aut id laboriosam reprehenderit consectetur? Praesentium,
aperiam corporis. Iste asperiores molestiae, itaque a minus dicta! Id
omnis suscipit iure illum.
</p>
</div>
<div class="text">
<h2>This is a title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel
inventore, aut id laboriosam reprehenderit consectetur? Praesentium,
aperiam corporis. Iste asperiores molestiae, itaque a minus dicta! Id
omnis suscipit iure illum.
</p>
</div>
<div class="text">
<h2>This is a title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel
inventore, aut id laboriosam reprehenderit consectetur? Praesentium,
aperiam corporis. Iste asperiores molestiae, itaque a minus dicta! Id
omnis suscipit iure illum.
</p>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Here is a complete vanilla solution. (open it in full screen mode)
I have a module where 3 cards stack on top of each other and then, on scroll, the cards will unstack one by one. See GIF of desired effect here.
I have tried to emulate the above effect using GSAP and ScrollTrigger, however, my animation is yielding undesirable results.
Here is my code so fare, to be viewed on +1200px screens:
$(function() {
gsap.registerPlugin(ScrollTrigger);
const container = document.querySelector(".cardStacking__cards");
const card = document.querySelector(".stackCard");
const cards = document.querySelectorAll(".stackCard");
const height = 510;
const timeline = gsap.timeline({
scrollTrigger: {
trigger: ".cardStacking__cards",
pin: true,
markers: true,
scrub: 1,
start: "bottom-=10% center",
end: "bottom top"
}
});
timeline.from(".stackCard", {
y: (index) => height * (cards.length - (index + 1)),
duration: (index) => 0.6 / (index + 1),
ease: "none",
stagger: (index) => 0.3 * (index),
});
});
:root {
--navy: #0E185F;
--white: #FFFFFF;
}
.background--navy {
background-color: var(--navy);
}
.color--white {
color: var(--white);
}
.spacer {
height: 2000px;
}
.cardStacking {
padding: 120px 0 141px 0;
/*********/
}
.cardStacking__intro {
margin-bottom: 100px;
}
.cardStacking .stackCard {
border-radius: 40px;
background: linear-gradient(90deg, #c7defe 0%, #e7e7f2 100%);
margin-bottom: 50px;
padding: 106px 135px 126px 77px;
/* CONTENT */
}
.cardStacking .stackCard:first-child {
box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.16);
}
.cardStacking .stackCard__content-header {
margin-bottom: 10px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<div class="spacer"></div>
<section class="cardStacking background--navy">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-10 col-lg-7">
<div class="cardStacking__intro text-center">
<h2 class="cardStacking__intro-header color--white">LOREM IPSUM DOLOR SIT AMET CONSETETUR SADIPSCING</h2>
<div class="cardStacking__intro-copy color--white">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-md-10">
<div class="cardStacking__cards">
<!------------>
<!-- CARD 1 -->
<!------------>
<div class="stackCard" style="z-index: 0;">
<div class="stackCard__content">
<span class="stackCard__content-header d-block">Header</span>
<div class="stackCard__content-copy">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.</div>
</div>
</div>
<!------------>
<!-- CARD 2 -->
<!------------>
<div class="stackCard" style="z-index: -1;">
<div class="stackCard__content">
<span class="stackCard__content-header d-block">Header 2</span>
<div class="stackCard__content-copy">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.</div>
</div>
</div>
<!------------>
<!-- CARD 3 -->
<!------------>
<div class="stackCard" style="z-index: -2;">
<div class="stackCard__content">
<span class="stackCard__content-header d-block">Header 3</span>
<div class="stackCard__content-copy">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.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="spacer"></div>
Issue(s)
From the demo you can see that, as soon as the "scroller start" indicator scrolls to and past the "start" indicator, the cards disappear. Upon inspecting the code, for some reason, when the indicators pass, cardStacking__cards has a top value of top: -1334.52px, which I'm unsure why.
The section does not pin when the cards are in view. I'm trying to pin the section until all cards are revealed, and then unpin.
You can do it as below. I created a simplified version of the code you pasted to showcase the feature. Here is a codepen of it as well.
gsap.registerPlugin(ScrollTrigger);
const tl = gsap.timeline({
scrollTrigger: {
trigger: ".cards",
pin: true,
start: "top 10%",
end: "bottom+=1000 bottom",
scrub: true
}
});
tl.to(".first", {
y: "-90vh"
}).to(
".second",
{
y: "-85vh"
},
"-=0.15"
);
body {
text-align: center;
}
.cards {
position: relative;
height: 85vh;
}
.card {
border-radius: 2rem;
position: absolute;
inset: 0;
}
.first {
background: lightblue;
bottom: 10vh;
}
.second {
background: lightgreen;
bottom: 5vh;
}
.third {
background: lightgray;
}
<script src="https://unpkg.com/gsap#3/dist/ScrollTrigger.min.js"></script>
<script src="https://unpkg.co/gsap#3/dist/gsap.min.js"></script>
<div>
<h1>Scroll to see magic</h1>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>
<div class="cards">
<div class="card third"></div>
<div class="card second"></div>
<div class="card first"></div>
</div>
<div>
<h1>Scroll to see magic</h1>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>
Please take a look at working example https://jsfiddle.net/23dz0evy/4/. By modifying const bottom = 40 bottom margin between panels can be changed, works with infinite number of panels.
I made a vertical slider in visual studio (not visual studio code), which after clicking a description will appear and the background image will be changed. But when clicked the background image is not changed, what should I fix?
In visual studio code, background image change after click the icon
But in Visual studio, background image not change after click the icon
<div class="feature">
<div class="background">
<div class="swiper mySwiper">
<div class="swiper-wrapper text-center">
<div class="swiper-slide text-center sg-feature" data-bg="~/">
<ul>
<img class="rounded mx-auto d-block" src="~/assets/Image/eat.png">
<p>Eat and Come</p>
<div class="sg-feature-desc hidden">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</ul>
</div>
<div class="swiper-slide text-center sg-feature" data-bg="~/assets/Image/b2.jpg">
<ul>
<img class="rounded mx-auto d-block" src="~/assets/Image/grab.png">
<h3>Eat and Come</h3>
<div class="sg-feature-desc hidden">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</ul>
</div>
<div class="swiper-slide text-center sg-feature" data-bg="s">
<ul>
<img class="rounded mx-auto d-block" src="~/assets/Image/sale.png">
<h3>Eat and Come</h3>
<div class="sg-feature-desc hidden">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</ul>
</div>
<div class="swiper-slide text-center sg-feature" data-bg="https://i.imgur.com/cqAklTF.jpeg">
<ul>
<img class="rounded mx-auto d-block" src="~/assets/Image/Secret sale.png">
<h3>Eat and Come</h3>
<div class="sg-feature-desc hidden">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</ul>
</div>
<div class="swiper-slide text-center sg-feature" data-bg="https://i.imgur.com/cqAklTF.jpeg">
<ul>
<img class="rounded mx-auto d-block" src="~/assets/Image/experience.png">
<h3>Eat and Come</h3>
<div class="sg-feature-desc hidden">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</ul>
</div>
<div class="swiper-slide text-center sg-feature" data-bg="https://i.imgur.com/cqAklTF.jpeg">
<ul>
<img class="rounded mx-auto d-block" src="~/assets/Image/auction.png">
<h3>Eat and Come</h3>
<div class="sg-feature-desc hidden">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</ul>
</div>
<div class="swiper-slide text-center sg-feature" data-bg="https://i.imgur.com/cqAklTF.jpeg">
<ul>
<img class="rounded mx-auto d-block" src="~/assets/Image/loyalty.png">
<h3>Eat and Come</h3>
<div class="sg-feature-desc hidden">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</ul>
</div>
</div>
</div>
</div>
.feature {
position: relative;
height: 100%;
}
.background {
background-image: url('../Image/b1.jpg');
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
height: 625px;
width: 100%;
}
.swiper {
width: 100%;
height: 550px;
}
.swiper-slide {
text-align: center;
font-size: 18px;
margin-top: 5%;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 50px;
height: 50px;
object-fit: cover;
}
.center .slick-center h3 {
-moz-transform: scale(1.08);
-ms-transform: scale(1.08);
-o-transform: scale(1.08);
-webkit-transform: scale(1.08);
color: #e67e22;
opacity: 1;
transform: scale(1.08);
}
.center h3 {
opacity: 0.8;
transition: all 300ms ease;
}
.hidden {
display: none;
}
.sg-feature img {
width: 100px;
height: 100px;
}
var swiper = new Swiper(".mySwiper", {
slidesPerView: 4,
spaceBetween: 30,
centeredSlides: true,
loop: true,
loopedSlides: 7,
direction: "vertical",
autoHeight: true,
pagination: {
el: ".swiper-pagination",
},
});
let $slidesDescriptions = $('.sg-feature-desc');
$(document).on('click', '.sg-feature', function () {
$slidesDescriptions.addClass('hidden');
let $slide = $(this);
console.log($slide.data('bg'));
$slide.find('.sg-feature-desc').removeClass('hidden');
$('background').css('background-image', `url('${$slide.data('bg')}')`);
});
I've 4 boxes of text like in this example here:
html, body {
height: 100%;
margin: 0;
}
.grid2x2 {
min-height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.grid2x2 > div {
display: flex;
flex-basis: calc(50% - 70px);
justify-content: center;
flex-direction: column;
}
.grid2x2 > div > div {
display: flex;
justify-content: center;
flex-direction: row;
}
.box { margin: 20px; padding: 15px; }
.box1 { background-color: red; }
.box2 { background-color: orange; }
.box3 { background-color: purple; }
.box4 { background-color: grey; }
<div class="grid2x2">
<div class="box box1"><div>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</div></div>
<div class="box box2"><div>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</div></div>
<div class="box box3"><div>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</div></div>
<div class="box box4"><div>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</div></div>
</div>
What I want to do now is that when I start selecting text inside box one, I want to only allow the selection of every text inside this box including child elements but not outside of it.
So with other words, selecting text inside a box should only work if the selection started inside it and should not go out of the box.
Is this possible? If yes, whats the best way to deal with this?
Update
I've posted a minimal example above. The problem is that I can't get it working on my page so I've took some time to build a 1:1 example:
#wrapper {
margin-top: 15px;
margin-bottom: 15px;
padding-top: 20px;
padding-bottom: 20px;
max-height: 200px;
border: 1px solid;
overflow-y: scroll;
outline: 0;
user-select: none;
background: lightgray;
}
#wrapper:active,
#wrapper:focus {
user-select: initial;
color: red; //For debugging
}
#wrapper .message {
padding-left: 15px;
padding-right: 15px;
margin-bottom: 12px;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
#wrapper .message .content {
background: #ffffff;
}
#wrapper .message .content-header {
margin-bottom: 2px;
}
#wrapper .message .content-header,
#wrapper .message .content-footer {
user-select: none; //Should be always not selectable
}
<div id="outer">
<div>I should not get marked when marking started inside the wrapper.</div>
<div id="wrapper" tabindex="-1">
<div class="message">
<div class="container">
<div class="content">
<div class="content-header">
<span class="title">I'm a test title</span>
</div>
<div class="content-text">Hello, I'm the content of the message</div>
<div class="content-footer">
<span class="time">02:20</span>
</div>
</div>
</div>
</div>
<div class="message">
<div class="container">
<div class="content">
<div class="content-header">
<span class="title">I'm a test title</span>
</div>
<div class="content-text">Hello, I'm the content of the message</div>
<div class="content-footer">
<span class="time">02:20</span>
</div>
</div>
</div>
</div>
<div class="message">
<div class="container">
<div class="content">
<div class="content-header">
<span class="title">I'm a test title</span>
</div>
<div class="content-text">Hello, I'm the content of the message</div>
<div class="content-footer">
<span class="time">02:20</span>
</div>
</div>
</div>
</div>
<div class="message">
<div class="container">
<div class="content">
<div class="content-header">
<span class="title">I'm a test title</span>
</div>
<div class="content-text">Hello, I'm the content of the message</div>
<div class="content-footer">
<span class="time">02:20</span>
</div>
</div>
</div>
</div>
<div class="message">
<div class="container">
<div class="content">
<div class="content-header">
<span class="title">I'm a test title</span>
</div>
<div class="content-text">Hello, I'm the content of the message</div>
<div class="content-footer">
<span class="time">02:20</span>
</div>
</div>
</div>
</div>
<div class="message">
<div class="container">
<div class="content">
<div class="content-header">
<span class="title">I'm a test title</span>
</div>
<div class="content-text">Hello, I'm the content of the message</div>
<div class="content-footer">
<span class="time">02:20</span>
</div>
</div>
</div>
</div>
<div class="message">
<div class="container">
<div class="content">
<div class="content-header">
<span class="title">I'm a test title</span>
</div>
<div class="content-text">Hello, I'm the content of the message</div>
<div class="content-footer">
<span class="time">02:20</span>
</div>
</div>
</div>
</div>
</div>
<div>I should not get marked when marking started inside the wrapper.</div>
</div>
You can use user-select: none; and disable it on focus and active to be able to select only the current element.
html,
body {
height: 100%;
margin: 0;
}
.grid2x2 {
min-height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.grid2x2>div {
display: flex;
flex-basis: calc(50% - 70px);
justify-content: center;
flex-direction: column;
}
.grid2x2>div>div {
display: flex;
justify-content: center;
flex-direction: row;
}
.box {
margin: 20px;
padding: 15px;
outline:none;
-moz-user-select: none;
user-select: none;
}
.box:active,
.box:focus{
-moz-user-select: initial;
user-select: initial;
}
.box1 {
background-color: red;
}
.box2 {
background-color: orange;
}
.box3 {
background-color: purple;
}
.box4 {
background-color: grey;
}
<div class="grid2x2">
<div class="box box1" tabindex="-1">
<div>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</div>
</div>
<div class="box box2" tabindex="-1">
<div>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</div>
</div>
<div class="box box3" tabindex="-1">
<div>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</div>
</div>
<div class="box box4" tabindex="-1">
<div>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</div>
</div>
</div>
You could try using the combination of the contentEditable attribute and stopping the user from editing with keyboard events.
var elements = document.getElementsByClassName('box');
for (var i = 0, iLen = elements.length; i < iLen; i++) {
elements[i].addEventListener('keydown', function (e) {
e.preventDefault();
});
}
html, body {
height: 100%;
margin: 0;
}
.grid2x2 {
min-height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.grid2x2 > div {
display: flex;
flex-basis: calc(50% - 70px);
justify-content: center;
flex-direction: column;
}
.grid2x2 > div > div {
display: flex;
justify-content: center;
flex-direction: row;
}
.box { margin: 20px; padding: 15px; }
.box1 { background-color: red; }
.box2 { background-color: orange; }
.box3 { background-color: purple; }
.box4 { background-color: grey; }
<div class="grid2x2">
<div class="box box1" contenteditable spellcheck="false"><div>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</div></div>
<div class="box box2" contenteditable spellcheck="false"><div>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</div></div>
<div class="box box3" contenteditable spellcheck="false"><div>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</div></div>
<div class="box box4" contenteditable spellcheck="false"><div>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</div></div>
</div>
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>