Accordeon webpage scrolling wrong - javascript

I am working on my website and I just cannot solve one problem I have with a javascript issue:
I have an accordeon type of page what i call now menu and I can open/slide the topics down when I click on them, where more infos will appear on that topic.
I am using smooth scrolling done in JS.
I structured it in "accmain" for accordeon and "accsub" for the content appearing when you click on the accmain.
As I want the transition between two topics to be smooth, I want the last "accmain" to close the according "accsub", then smoothly go to the new "accmain", align it on the top and open the new "accsub".
Now so far everything is just fine.
Only problem I do run into is when You open another topic while one is still open:
It does not align the new accmain to the top, but shifts the whole scroll about the height of the "accsub" which was opened before, but should be closed now. So the new topic is not aligned to top but eventually shifted so far (depending on the last topic and it's height) that You can't see anything of it.
It is actually a pretty simple problem i guess, though I am very new to especially javascript, but I know that it is exactly shifting for the amount of pixels of the accsub before. that's a start :)
here is a Fiddle
thanks everyone, I do appreciate any help.
I am spending now a few weeks on excactly that problem.
/* multi-toggle accordion*/
$(document).ready(function() {
$(".accsub").hide();
$('.accmain').click(function() {
$( this ).toggleClass( "miau100" );
if ($(this).next().is(":visible")) {
$(this).next().slideUp('fast');
$('html,body').animate({
scrollTop: $(this).offset().top - 150
}, 'slow');
$( this ).toggleClass( "miau75" );
} else {
$('.accsub:visible').slideUp('fast');
$(this).next().slideDown('fast');
$('html,body').animate({
scrollTop: $(this).offset().top
}, 'slow');
}
});
});
/* GO TO TOP BUTTON */
$(document).ready(function() {
$("a[href='#top']").click(function() {
$('.accsub:visible').slideUp('fast');
$("html, body").animate({
scrollTop: 0
}, "slow");
return false;
});
});
#import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
header > .accmain {
height: 150px;
}
p1 > .accmain:hover {
color: grey
}
footer {
min-height: 150px;
}
* {
box-sizing: border-box;
}
.beitrag {}
.accmain {
display: flex;
justify-content: center;
min-height: 3em;
background-color: #FFF;
cursor: pointer;
text-align: left;
border-bottom: solid 1px #585858;
padding: 1px;
color: #585858;
opacity: 0.75;
}
.accmain:hover {
/* background-color: #b3b3b3; */
transition: ease-in-out 0.7s;
color: black;
opacity: 1.0;
}
.miau100 {
opacity: 1.0;
}
.miau75 {
opacity: 0.75;
}
.accsub {
display: flex;
flex-direction: column;
align-items: center;
/* horizontale zentrierung = wenn column dann align-items: center; ansonsten justify-content: center;*/
background-color: #FFF;
border-bottom: solid 1px #625750;
padding-left: 10%;
padding-right: 10%;
}
.imagewrap img {
max-height: 100%;
max-width: 100%;
margin-bottom: 40px;
}
.topbutton {
position: fixed;
width: 50px;
height: 50px;
top: 90%;
left: 90%;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
background-color: rgba(0, 0, 0, 0.1);
font-size: 2em;
text-decoration: none;
color: #000;
transition: ease 0.7s;
}
.topbutton:hover {
background-color: rgba(0, 0, 0, 0.3);
transition: ease 0.7s;
}
.text {
width: 722px;
font-size: 1em;
}
.newspaper {
-webkit-column-count: 2;
/* Chrome, Safari, Opera */
-moz-column-count: 2;
/* Firefox */
column-count: 2;
font-family: Roboto, sans-serif;
font-size: 14px;
font-style: light;
font-variant: normal;
font-weight: 300;
line-height: 26.4px;
margin-top: 80px;
margin-bottom: 80px;
max-width: 722px;
}
.newspaper2 {
-webkit-column-count: 2;
/* Chrome, Safari, Opera */
-moz-column-count: 2;
/* Firefox */
column-count: 2;
font-family: Roboto, sans-serif;
font-size: 14px;
font-style: light;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
margin-top: 40px;
margin-bottom: 40px;
max-width: 722px;
}
.newspaper3 {
-webkit-column-count: 1;
/* Chrome, Safari, Opera */
-moz-column-count: 1;
/* Firefox */
column-count: 1;
font-family: Roboto, sans-serif;
font-size: 1em;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
max-width: 722px;
align-items: left;
}
h1 {
font-family: Roboto, sans-serif;
font-size: 24px;
font-style: light;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
}
h2 {
font-family: Roboto, sans-serif;
font-size: 32px;
font-style: bold;
font-variant: normal;
font-weight: 500;
line-height: 15.4px;
}
h3 {
display: inline;
margin: 0px;
font-family: Roboto, sans-serif;
font-size: 12px;
font-style: bold;
font-variant: normal;
font-weight: 500;
line-height: 15.4px;
}
p {
display: inline;
margin: 0px;
font-family: Roboto, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 20px;
}
p1 {
display: inline;
margin: 0px;
font-family: Roboto, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 20px;
color: #A4A4A4;
margin-left: 10px;
}
pre {
font-family: Roboto, sans-serif;
font-size: 13px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 18.5714px;
align-items: left;
}
blockquote {
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
font-size: 21px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 30px;
}
hr {
width: 100%;
height: 1px;
margin: 0 auto;
color: black;
}
<!DOCTYPE html>
<html lang="de-de">
<meta charset="UTF-8">
<meta name="Bartek Juretko" content="Künstler">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="favicon.png" sizes="16x16" type="image/png">
<body class="all">
<header>
<div class="accmain">
<!-- erstes kind-->
<div class="text">
<h2>BARTEK JURETKO</h2></div>
</div>
<div class="accsub">
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor
cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming
id quod mazim placerat facer possim assum.
</div>
</div>
</header>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>AStA Cafe<p1>27.01.2015</p1></h1></div>
</div>
<div class="accsub">
<div class="newspaper">Astacafe Hagen, Kunstakademie Duesseldorf
<br>
<br>
<br> Fertigstellung und Eroeffnung
<br>
<br> Der Umbau des Astacafes in der Kunstakademie Duesseldorf hat einen kroenenden Abschluss gefunden: Am 27. Januar 2015 um 19 Uhr wurde das Cafe feierlich eroeffnet. Zur Eroeffnung gab es feinste Koestlichkeiten in Form eines vier Gaenge Menues.
<br> Das Astacafe hat Mo-Fr von 12-19 Uhr geoeffnet.
<br>
<br> Mit Louisa Rossner, Duesseldorf, 2014-15
<br>
<br>
</div>
<div class="imagewrap">
<img src="http://www.umbraframework.de/2270.jpg">
</div>
</div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Ausführung Service-Theke im Sparta<p1>18.04.2017</p1></h1>
</div>
</div>
<div class="accsub">
<div class="newspaper2">
Fertigstellung und Eroeffnung
<br>
<br> Der Umbau des Astacafes in der Kunstakademie Duesseldorf hat einen kroenenden Abschluss gefunden: Am 27. Januar 2015 um 19 Uhr wurde das Cafe feierlich eroeffnet. Zur Eroeffnung gab es feinste Koestlichkeiten in Form eines vier Gaenge Menues.
<br> Das Astacafe hat Mo-Fr von 12-19 Uhr geoeffnet.
<br>
<br> Mit Louisa Rossner, Duesseldorf, 2014-15
</div>
<div class="imagewrap">
<img src="http://www.umbraframework.de/2270.jpg">
</div>
</div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Publikation im Salon Magazin Nr.4<p1>04.2017</p1></h1></div>
</div>
<div class="accsub">
<?php
echo date("d.m.Y H:i:s");
?>
</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Kunstakademie Düsseldorf Rundgang 2017, Teilnahme<p1>02.2017</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>kunstakademie.gallery, Ausstellungsteilnahme&Tab;<p1>12.2016</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>'art-hoc' im Reservat, Ausstellungsteilnahme&Tab;<p1>12.2016</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>kunst kann's 2016, Kunstauktion Teilnahme<p1>11.2016</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>kunstakademie.gallery, Ausstellungsteilnahme<p1>08.2016</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>TOTAL, Ausstellungsteilnahme<p1>08.2016</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>ad absurdum im HINTERZIMMER, Ausstellung<p1>08.2016</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Cafe RAT und TAT, Aktion und Ausstellung<p1>08.2016</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Absolventenstipendium 2016 der Freunde und Förderer<p1>07.2016</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Baukunstkammer, Abschlussausstellung und Akademiebrief<p1>07.2016</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>'art-hoc' in den Ex-Achenbach-Hallen, Ausstellungsteilnahme<p1>03.2016</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Trockenbauwand<p1>04.2016</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Habe Meine Hölzer Sortiert<p1>03.2016</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Kunstakdemie Düsseldorf Rundgang 2016, Teilnahme<p1>01.2016</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Nischenpreis, Wettbewerbsteilnahme<p1>01.2016</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Friesenberg Heidelberg, Entwurf<p1>11.2015</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>kunst kann's 2015, Kunstauktion Teilnahme<p1>11.2015</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Wystawa Plastyki Zagłębia Miedziowego 2015, Ausstellungsteilnahme<p1>08.2015</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>CLASH, Ausstellung<p1>06.2015</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Ein Europahaus für den Europatag im Düsseldorfer Rathaus<p1>09.2015</p1></h1></div>
</div>
<div class="accsub">Entwurf des 'Europahauses' fuer 'We Are Europe' Zum sogenannten Europatag, am 9.Mai, einem Jahrestag der bisher eher als das 'Ende des Zweiten Weltkrieges' bekannt ist, entstand ein Entwurf fuer die von der Organisation 'We Are Europe' geplante
Aktion aus Kartons ein Haus fuer Europa zu bauen. Die Besucher beteiligten sich aktiv an einer Beschriftung der Bausteine mit Werten, die sie mit Europa verbinden, und bauten so Stein fuer Stein das 'Europahaus' im Duesseldorfer Rathaus. Duesseldorfs
Oberbuergermeister Thomas Geisel fing mit dem Grundstein an und eroeffnete zusammen mit der NRW-Ministerin Dr. Schwall-Dueren und dem Vorsitzenden von We Are Europe Jens Baganz um 11 Uhr die Aktion. Mit Aneta Dobozi, Duesseldorf, 2015 2. Foto:
Melanie Zanin 4. Foto: We Are Europe www.duesseldorf.de www.we-are-europe.org </div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Bauhausmuseum Dessau, Wettbewerbsbeitrag<p1>03.2015</p1></h1></div>
</div>
<div class="accsub">
<div class="imagewrap">
<img src="http://www.umbraframework.de/2270.jpg">
</div>
<div class="text">
<div class="newspaper2">
<br>Teilnahme Realisierungswettbewerb
<br>
<br>Staedtebaulich wirkt das Museum wie ein Solitaer umgeben von Vegetation, differenziert betrachtet unterscheiden sich die Geschosse: das Erdgeschoss adaptiert die Baufluchten der Ratsgasse, positioniert zwei Baukoerper in der Verlaengerung
der sich in der Ratsgasse gegenueberstehenden Fassadenreihen und schafft dazwischen einen Hof, als gleich einen Durchgang zum Park in direkter Forfuehrung der Ratsgasse. Wie im Cartesischen Dualismus stehen sich im Erdgeschoss zwar zwei Entitaeten
gegenueber, werden aber im oberen Geschoss miteinander vereint zu einem einheitlichen Ganzen: der Ausstellungshalle, die als Buegel ueber beiden erdgeschossigen Koerpern schwebt. Es ist ein komplimentaeres Tor: von der Stadt zum Park und vom
Park zur Stadt. Die Ausstellunghalle ist ganz bewusst angelehnt an den Gedanken von grossen Messehallen, die Flexibilitaet und Moeglichkeiten bewahren, um der Ausstellungsarchitektur mehr Freiraum zu lassen.
<br>
<br>Dessau, 2015</div>
</div>
</div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Kunstakademie Düsseldorf Rundgang 2015, Teilnahme<p1>02.2015</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>AStA Cafe Hagen, Fertigstellung<p1>01.2015</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Helsinki Guggenheim Museum, Wettbewerbsteilnahme<p1>10.2014</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Kleine Brötchen Backen, Performance<p1>08.2014</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Jaana Caspary VERSUS Bartek Juretko, Ausstellung<p1>08.2014</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>AStA Cafe Hagen in der Kunstakademie, Entwurf<p1>04.2014</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>17,98 EUR<p1>02.2014</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Mercedes-Benz, Workshop<p1>2013/2014</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Gestaltung Rundgangscafe, Vorschlag<p1>12.2013</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Gerresheimer 100, Ausstellung<p1>10.2013</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Den Toten Ihre Namen Geben, Engere Auswahl Wettbewerbsbeitrag</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Faerber, Ausstellungsteilnahme</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Stadt der Zukunft, Workshop</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Stadthaus in Wien, Wettbewerbsbeitrag</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Upcycling Berlin, Ausstellungsteilnahme</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Keine Kunst</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Brücke im Landschaftsschutzgebiet, Wettbewerbsbeitrag</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Upcycling Berlin, Wettbewerbsgewinn</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Keine Kunst</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Bibliothek in Daegu, Wettbewerbsbeitrag</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Findlinge Seminar auf der Architektur Biennale in Venedig</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Keine Kunst</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Architektur AG an der GGS Marienstrasse</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Entwurf Mehrfamilienwohnhaus in Indien</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Autodidaktische Weltkarte</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Neuer Entwurf für ein Grabmal</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Ny Valer Kirke, Wettbewerbsbeitrag</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<p>Impressum</p>
</div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap">
</div>
</div>
<div>
⌃
</div>
<footer>
Zum Anfang der Seite Scrollen
</footer>
</html>

maybe this could be a solution for you:
$(document).ready(function(){
$(".accsub").hide();
$(".accmain").click(function(){
$(".accsub").hide();
$(this).next(".accsub").slideToggle("fast");
$('html, body').animate({
scrollTop: $(this).offset().top - 1
}, 'slow');
});
});
I guess you want to align the accmain- container to the top of the browser on each klick on it.
and don't forget to put "GO TO THE TOP" inside $(document).ready(function(){YOUR ENTIRE CODE GOES HERE}, so that your code waits for the document to be loaded.

Related

Fade out one section and fade in the next section as you scroll on webpage

I have a site and I want each section to take up the screen and as you scroll down the page the sections fade out as the next section comes into view. I'm struggling on how this math needs to work.
For one section it's easy which is basically the height of the element and it's distance from the top to get the opacity percentage. However, I just can't quite figure out the math for other sections. I need section 2 to start fading in as section 1 is fading out.
I do not want to scrolljack. I just want a scrolling effect. Rather than override default scrolling behavior I just want to animate in/out as you scroll where a certain Y scroll value = a certain CSS value rather than a sort of "breakpoint" where it animates to a new "slide".
For the proper effect, for example, my math divides the height of the row by 2 so that it's 50% faded out as the next section should be fading in 50%. But, as of now, the math just doesn't work for the other sections.
This site is using vanilla JS as it's supposed to be a simple one pager.
Example below:
(function () {
window.addEventListener('scroll', () => {
const rows = document.querySelectorAll('.row');
rows.forEach(function (row, index) {
const distanceToTop = window.pageYOffset;
const elementHeight = row.offsetHeight * (index + 1) / 2;
row.style.opacity = ((elementHeight - distanceToTop) / elementHeight * 100) / 100;
});
});
})();
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0 0 0 0;
font-family: sans-serif;
font-family: 'Manrope', helvetiva, sans-serif;
transition: background-color 1s;
color:#fff;
background: linear-gradient(0deg, #100521 0%, #50357c 50%, #878290 100%);
}
header {
position: fixed;
top: 0;
width: 100%;
background: #fff;
z-index: 999;
}
header h1 {
font-family: 'Lack';
font-size: 4em;
text-align: center;
padding: 10px;
color: #100521;
}
.row-container .row:first-child {
opacity: 1;
}
.row {
opacity: 0;
height: 100vh;
display: flex;
flex-direction:column;
}
.row-inner {
display: grid;
grid-template-columns: 1fr 1fr;
position: sticky;
top: 0;
/* border: 1px solid yellow; */
padding: 0;
height: 100vh;
}
.column {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
flex: 50%;
padding: 10px;
}
.left-column {
background-color: transparent;
}
.right-column {
background-color: transparent;
}
h1 {
font-family: 'Unbounded', helvetica, sans-serif;
}
h1 {
margin: 0;
font-size: 36px;
}
h2 {
margin: 0;
font-size: 24px;
}
p {
margin: 10px 0;
font-size: 18px;
line-height: 1.5;
}
img {
width: 100%;
height: auto;
}
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Manrope&family=Unbounded&family=Lack&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>My App</h1>
</header>
<!-- First row -->
<div class="row-container">
<div class="row section-1">
<div class="row-inner">
<div class="column left-column">
<div class="column-inner">
<h1>Headline 1</h1>
<h2>Subhead 1</h2>
<p>Lorem Ipsum dolar Gamet</p>
</div>
</div>
<div class="column right-column">
<div class="column-inner">
<img src="https://avatars.dicebear.com/api/adventurer/team-member-1.jpg" alt="Image 1">
</div>
</div>
</div>
</div>
<!-- Second row -->
<div class="row section-2">
<div class="row-inner">
<div class="column left-column">
<div class="column-inner">
<h1>Headline 2</h1>
<h2>Subhead 2</h2>
<p>Lorem Ipsum dolar Gamet</p>
</div>
</div>
<div class="column right-column">
<div class="column-inner">
<img src="https://avatars.dicebear.com/api/adventurer/team-member-2.jpg" alt="Image 2">
</div>
</div>
</div>
</div>
<!-- Third row -->
<div class="row section-3">
<div class="row-inner">
<div class="column left-column">
<div class="column-inner">
<h1>Headline 3</h1>
<h2>Subhead 3</h2>
<p>Lorem Ipsum dolar Gamet</p>
</div>
</div>
<div class="column right-column">
<div class="column-inner">
<img src="https://avatars.dicebear.com/api/adventurer/team-member-3.jpg" alt="Image 3">
</div>
</div>
</div>
</div>
<!-- Fourth row -->
<div class="row section-4">
<div class="row-inner">
<div class="column left-column">
<div class="column-inner">
<h1>Headline 4</h1>
<h2>Subhead 4</h2>
<p>Lorem Ipsum dolar Gamet</p>
</div>
</div>
<div class="column right-column">
<div class="column-inner">
<img src="https://avatars.dicebear.com/api/adventurer/team-member-4.jpg" alt="Image 4">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
As suggested in one of the comments to your question, it's more effective to use IntersectionObserver rather than the 'scroll' event listener.
If I'm correct, this snippet should help you achieve what you're looking for:
window.addEventListener("load", (event) => {
let options = {
rootMargin: "0px",
threshold: 0.8
};
const intersectionHandler = function(entries, observer) {
entries.forEach((entry) => {
if (entry.isIntersecting && entry.intersectionRatio > 0.8) {
entry.target.classList.remove("fadeOut");
entry.target.classList.add("fadeIn");
} else {
entry.target.classList.remove("fadeIn");
entry.target.classList.add("fadeOut");
}
});
};
let observer = new IntersectionObserver(intersectionHandler, options);
document.querySelectorAll(".section").forEach((row, index) => {
observer.observe(row);
});
});
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0 0 0 0;
font-family: sans-serif;
font-family: "Manrope", helvetiva, sans-serif;
transition: background-color 1s;
color: #fff;
background: linear-gradient(0deg, #100521 0%, #50357c 50%, #878290 100%);
}
header {
position: fixed;
top: 0;
width: 100%;
background: #fff;
z-index: 999;
}
header h1 {
font-family: "Lack";
font-size: 4em;
text-align: center;
padding: 10px;
color: #100521;
}
.row-container .row:first-child {
opacity: 1;
}
.row {
opacity: 0;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.row-inner {
display: grid;
grid-template-columns: 1fr 1fr;
position: sticky;
top: 0;
/* border: 1px solid yellow; */
padding: 0;
height: 100vh;
}
.column {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
flex: 50%;
padding: 10px;
height: 100vh;
box-sizing: border-box;
}
.left-column {
background-color: transparent;
}
.right-column {
background-color: transparent;
}
h1 {
font-family: "Unbounded", helvetica, sans-serif;
}
h1 {
margin: 0;
font-size: 36px;
}
h2 {
margin: 0;
font-size: 24px;
}
p {
margin: 10px 0;
font-size: 18px;
line-height: 1.5;
}
img {
width: 100%;
height: auto;
}
.fadeIn {
animation-name: fadeIn;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.fadeOut {
animation-name: fadeOut;
animation-duration: .5s;
animation-fill-mode: forwards;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
<!-- First row -->
<div class="row-container">
<div class="row section">
<div class="row-inner">
<div class="column left-column">
<div class="column-inner">
<h1>Headline 1</h1>
<h2>Subhead 1</h2>
<p>Lorem Ipsum dolar Gamet</p>
</div>
</div>
<div class="column right-column">
<div class="column-inner">
<img src="https://avatars.dicebear.com/api/adventurer/team-member-1.jpg" alt="Image 1">
</div>
</div>
</div>
</div>
<!-- Second row -->
<div class="row section">
<div class="row-inner">
<div class="column left-column">
<div class="column-inner">
<h1>Headline 2</h1>
<h2>Subhead 2</h2>
<p>Lorem Ipsum dolar Gamet</p>
</div>
</div>
<div class="column right-column">
<div class="column-inner">
<img src="https://avatars.dicebear.com/api/adventurer/team-member-2.jpg" alt="Image 2">
</div>
</div>
</div>
</div>
<!-- Third row -->
<div class="row section">
<div class="row-inner">
<div class="column left-column">
<div class="column-inner">
<h1>Headline 3</h1>
<h2>Subhead 3</h2>
<p>Lorem Ipsum dolar Gamet</p>
</div>
</div>
<div class="column right-column">
<div class="column-inner">
<img src="https://avatars.dicebear.com/api/adventurer/team-member-3.jpg" alt="Image 3">
</div>
</div>
</div>
</div>
<!-- Fourth row -->
<div class="row section">
<div class="row-inner">
<div class="column left-column">
<div class="column-inner">
<h1>Headline 4</h1>
<h2>Subhead 4</h2>
<p>Lorem Ipsum dolar Gamet</p>
</div>
</div>
<div class="column right-column">
<div class="column-inner">
<img src="https://avatars.dicebear.com/api/adventurer/team-member-4.jpg" alt="Image 4">
</div>
</div>
</div>
</div>
</div>
You'll notice I've made some minor modifications to your HTML and CSS, but the magic happens in the Javascript.
I've also used the window "load" event listener to create the observer options, object and callback function when the page is loaded.
You can check the IntersectionObserver API docs for more details on how it works and how to tweak the options or the callback to suit your needs.
Let me know if you have any questions for modifying my code. (I've also had to change your css a bit - the content of the row element was higher than the row element itself what led to some weird issues.)
I have rewritten most of it and it should now work for large row heights. The math for it is just a quadratic formula (Opacity of offset from center of the screen) with it's roots at the height of the row and a maximum at 0 offset with a value of 1.
/** #format */
const calculateOpacity = () => {
const ROW_CONTAINER = document.querySelector(".row-container");
const rows = ROW_CONTAINER.children;
const rowContainerBBox = ROW_CONTAINER.getBoundingClientRect();
console.log("calc")
for (const row of rows) {
const rowBBox = row.getBoundingClientRect();
const top = rowBBox.top - rowContainerBBox.top;
const bottom = rowBBox.bottom - rowContainerBBox.bottom;
if (rowBBox.height > rowContainerBBox.height) {
const opacityOfOffset = (offset) => {
const a = -1 / Math.pow(rowBBox.height, 2);
return Math.max(0, a * Math.pow(offset, 2) + 1);
};
row.style.opacity = opacityOfOffset(top + bottom);
continue;
}
const unvisibleHeightTop = -Math.min(0, top);
const unvisibleHeightBottom = Math.max(0, bottom);
const visibleHeight = rowBBox.height - unvisibleHeightTop - unvisibleHeightBottom;
row.style.opacity = visibleHeight / rowBBox.height;
}
};
document.querySelector(".row-container").addEventListener("scroll", calculateOpacity);
/** #format */
body {
height: 100%;
margin: 0;
padding: 0;
font-family: sans-serif;
font-family: "Manrope", helvetiva, sans-serif;
color: #fff;
}
header {
height: max(70px, 10vh);
position: fixed;
background-color: black;
width: 100%;
display: flex;
align-items: center;
}
header h1 {
margin: 0;
}
main {
padding-top: max(70px, 10vh);
height: 100%;
box-sizing: border-box;
}
.row-container {
background: linear-gradient(0deg, #100521 0%, #50357c 50%, #878290 100%);
height: calc(100vh - max(70px, 10vh));
overflow-y: auto;
}
.row {
height: 150vh;
display: flex;
align-items: center;
padding: 10vh 0;
}
.row .row-inner {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
}
.row .row-inner .col {
margin-inline: 10px;
display: flex;
align-items: center;
height: 100%;
}
.row img {
width: 100%;
height: auto;
}
.row h2 {
margin: 0;
font-family: "Unbounded", helvetica, sans-serif;
font-size: 36px;
}
.row h3 {
margin: 0;
font-size: 24px;
}
.row p {
margin: 10px 0;
font-size: 18px;
line-height: 1.5;
}
<!-- #format -->
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Manrope&family=Unbounded&family=Lack&display=swap" rel="stylesheet" />
</head>
<body>
<header>
<h1>My App</h1>
</header>
<main>
<div class="row-container">
<div class="row row-1">
<div class="row-inner">
<div class="col left">
<div class="col-inner">
<h2>Headline 1</h2>
<h3>Subhead 1</h3>
<p>Lorem ipsum dolor sit</p>
</div>
</div>
<div class="col right">
<img src="https://avatars.dicebear.com/api/adventurer/team-member-1.jpg" alt="Image 1" />
</div>
</div>
</div>
<div class="row row-1">
<div class="row-inner">
<div class="col left">
<div class="col-inner">
<h2>Headline 1</h2>
<h3>Subhead 1</h3>
<p>Lorem ipsum dolor sit</p>
</div>
</div>
<div class="col right">
<img src="https://avatars.dicebear.com/api/adventurer/team-member-1.jpg" alt="Image 1" />
</div>
</div>
</div>
<div class="row row-1">
<div class="row-inner">
<div class="col left">
<div class="col-inner">
<h2>Headline 1</h2>
<h3>Subhead 1</h3>
<p>Lorem ipsum dolor sit</p>
</div>
</div>
<div class="col right">
<img src="https://avatars.dicebear.com/api/adventurer/team-member-1.jpg" alt="Image 1" />
</div>
</div>
</div>
</div>
</main>
</body>
</html>
You didn't really ask for a web component, I just got carried away. This is a fun challenge! Anyway, here's a version that is NOT a web component. I also realized that I missed all the css that you provided. So I added that as well. I'm not sure if tweaking the css a little is verbotten ... but I did it. I also added a single [section] tag, which wraps everything but the app header, to make it more bullet proof ... Please let me know if I need to use your code exactly as you posted it.
I had a lot of trouble finding settings that provide a dramatic enough effect on both large screens and phones without some ugly hacks, so I opted for a compromise. You can optimize for either large or small by changing the rootMargin option for the IntersectionObserver. Smaller values make the fade effect more dramatic, but values that are too small cause the content to look washed out on smaller devices. As I'm posting this, rootMargin is set to "-25px". Apparantly you can use negative values, but as far as I can tell, you can only use "px" as the measurement. Other measurements don't seem to work.
Sooooo...
I used IntersectionObserver
const observer = new IntersectionObserver(fadeInOut, options);
One of the options IntersectionObserver takes is something called "threshold". I don't totally understand it, but MDN suggested that if you want to poll the viewport to determine element visibility, you should set the value of "threshold" as an array with many numbers ranging from 0 to 1. The example provided a function that generates 20 of them, so that's what I used.
function buildThresholds() {
const steps = 20;
const thresholds = [];
for (let i = 0; i <= steps; i++) {
let ratio = i/steps;
thresholds.push(ratio);
}
thresholds.push(0);
return thresholds;
}
Then I grabbed the collection of elements to watch using querySelectorAll(".row-container").
Then I looped through the elements and added each one to the observer's watch list.
observer.observe(elem);
Then, in the callback you provide when you create a new instance of IntersectionObserver, I set each element's opacity to the the intersectionRatio, which is a property provided by the instance of the IntersectionObserverEntry which is passed to the callback.
function fadeInOut(items, observer) {
items.forEach( (item) => {
item.target.style.opacity = item.intersectionRatio;
});
}
function buildThresholds() {
const steps = 20;
const thresholds = [];
for (let i = 0; i <= steps; i++) {
let ratio = i/steps;
thresholds.push(ratio);
}
thresholds.push(0);
return thresholds;
}
function fadeInOut(items, observer) {
items.forEach( (item) => {
item.target.style.opacity = item.intersectionRatio;
});
}
function scrollFade() {
const elems = document.querySelectorAll('.row-container');
const options = {
root: null,
rootMargin: "-25px",
threshold: buildThresholds()
};
const observer = new IntersectionObserver(fadeInOut, options);
for (let elem of elems) {
observer.observe(elem);
}
}
document.addEventListener('DOMContentLoaded', scrollFade);
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0 0 0 0;
font-family: sans-serif;
font-family: 'Manrope', helvetiva, sans-serif;
transition: background-color 1s;
color:#fff;
background: linear-gradient(0deg, #100521 0%, #50357c 50%, #878290 100%);
}
header {
position: fixed;
top: 0;
width: 100%;
background: #fff;
z-index: 999;
}
header h1 {
font-family: 'Lack';
font-size: 4em;
text-align: center;
padding: 10px;
color: #100521;
}
section {
margin-top: 6em;
}
h1 {
font-family: 'Unbounded', helvetica, sans-serif;
}
h1 {
margin: 0;
font-size: 36px;
}
h2 {
margin: 0;
font-size: 24px;
}
p {
margin: 10px 0;
font-size: 18px;
line-height: 1.5;
}
img {
width: 100%;
height: auto;
}
.row-container {
background-color: rgb(16, 5, 33);
min-height: 50vh;
}
.row-inner {
align-content: center;
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
padding: 10px;
gap: 10px;
}
.left-column {
flex: 1 1 70vw;
}
.right-column {
flex: 1 1 100px;
text-align: center;
}
<header>
<h1>My App</h1>
</header>
<section>
<div class="row-container">
<div class="row section">
<div class="row-inner">
<div class="column left-column">
<div class="column-inner">
<h1>Headline One</h1>
<h2>Subhead One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="column right-column">
<div class="column-inner">
<img slot="avatar" src="https://avatars.dicebear.com/api/adventurer/team-member-1.jpg" alt="Image 1">
</div>
</div>
</div>
</div>
</div>
<div class="row-container">
<div class="row section">
<div class="row-inner">
<div class="column left-column">
<div class="column-inner">
<h1>Headline Two</h1>
<h2>Subhead Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="column right-column">
<div class="column-inner">
<img slot="avatar" src="https://avatars.dicebear.com/api/adventurer/team-member-2.jpg" alt="Image 1">
</div>
</div>
</div>
</div>
</div>
<div class="row-container">
<div class="row section">
<div class="row-inner">
<div class="column left-column">
<div class="column-inner">
<h1>Headline Three</h1>
<h2>Subhead Three</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="column right-column">
<div class="column-inner">
<img slot="avatar" src="https://avatars.dicebear.com/api/adventurer/team-member-3.jpg" alt="Image 1">
</div>
</div>
</div>
</div>
</div>
<div class="row-container">
<div class="row section">
<div class="row-inner">
<div class="column left-column">
<div class="column-inner">
<h1>Headline Four</h1>
<h2>Subhead Four</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="column right-column">
<div class="column-inner">
<img slot="avatar" src="https://avatars.dicebear.com/api/adventurer/team-member-4.jpg" alt="Image 1">
</div>
</div>
</div>
</div>
</div>
<div class="row-container">
<div class="row section">
<div class="row-inner">
<div class="column left-column">
<div class="column-inner">
<h1>Headline Five</h1>
<h2>Subhead Five</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="column right-column">
<div class="column-inner">
<img slot="avatar" src="https://avatars.dicebear.com/api/adventurer/team-member-5.jpg" alt="Image 1">
</div>
</div>
</div>
</div>
</div>
<div class="row-container">
<div class="row section">
<div class="row-inner">
<div class="column left-column">
<div class="column-inner">
<h1>Headline Six</h1>
<h2>Subhead Six</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="column right-column">
<div class="column-inner">
<img slot="avatar" src="https://avatars.dicebear.com/api/adventurer/team-member-6.jpg" alt="Image 1">
</div>
</div>
</div>
</div>
</div>
</section>
Will this work? I used IntersectionObserver and set the opacity of the sections based on the intersection ratio of each section with the viewport. I pretty much took the idea straight from MDN.
MDN Intersection Observer API
class ScrollFade extends HTMLElement {
template;
shadow;
static observer = false;
constructor() {
super();
this.shadow = this.attachShadow({mode: 'open'});
if (!ScrollFade.observer) {
const buildThresholds = function() {
const steps = 20;
const thresholds = [];
for (let i = 0; i <= steps; i++) {
let ratio = i/steps;
thresholds.push(ratio);
}
thresholds.push(0);
return thresholds;
}
const options = {
root: null,
rootMargin: "0px",
threshold: buildThresholds()
};
ScrollFade.observer = new IntersectionObserver(ScrollFade.fadeInOut, options);
}
}
connectedCallback() {
const tmpl = document.querySelector('#scroll-fade-template').cloneNode(true);
const template = tmpl.content;
ScrollFade.observer.observe(this.shadow.host);
this.shadow.append(template);
}
disconnectedCallback() {
ScrollFade.observer.unobserve(this.shadow.host);
}
static fadeInOut(items, observer) {
items.forEach( (item) => {
item.target.style.opacity = item.intersectionRatio;
});
}
}
document.addEventListener('DOMContentLoaded', customElements.define('scroll-fade', ScrollFade));
body { margin: 0 }
img { width: 100%; }
<scroll-fade>
<h1 slot="headline">Headline One</h1>
<h2 slot="subhead">Subhead One</h2>
<img slot="avatar" src="https://avatars.dicebear.com/api/adventurer/team-member-1.jpg" alt="Image 1">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip </p>
</div>
</scroll-fade>
<scroll-fade>
<h1 slot="headline">Headline Two</h1>
<h2 slot="subhead">Subhead Two</h2>
<img slot="avatar" src="https://avatars.dicebear.com/api/adventurer/team-member-2.jpg" alt="Image 2">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip </p>
</div>
</scroll-fade>
<scroll-fade>
<h1 slot="headline">Headline Three</h1>
<h2 slot="subhead">Subhead Three</h2>
<img slot="avatar" src="https://avatars.dicebear.com/api/adventurer/team-member-3.jpg" alt="Image 1">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip </p>
</div>
</scroll-fade>
<template id="scroll-fade-template">
<style>
.row-container {
background-color: seagreen;
height: 100vh;
overflow: auto;
}
.row-inner {
align-content: center;
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
padding: 10px;
gap: 10px;
}
.left-column {
flex: 1 1 70vw;
}
.right-column {
flex: 1 1 100px;
text-align: center;
}
</style>
<div class="row-container">
<div class="row section">
<div class="row-inner">
<div class="column left-column">
<div class="column-inner">
<slot name="headline">Need Headline</slot>
<slot name="subhead">Need Subhead</slot>
<slot>Need Content</slot>
</div>
</div>
<div class="column right-column">
<div class="column-inner">
<slot name="avatar">Need Avatar</slot>
</div>
</div>
</div>
</div>
</div>
</template>

Multiple/Nested tabs using jquery Click function not working

I'm working on tabs here multiple/nested tabs on the same page my code is working fine current class also added data-target attribute also working fine. The problem is on Click function might be I'm not targetting element properly. this children() I used because I have multiple/nested tabs on same page Can anyone suggest me what might be the issue here tabs are not changing click function not working properly
function atscTabs() {
$('.at-tabs').each(function(index, item) {
var tab_item = $(this).find('.at-tab__item');
var tab_item_title = $(this).find('.at-title__text');
var tab_content = $(this).find('.at-content__item');
tab_content.hide();
//adding data attribute
tab_item_title.each(function(idx, ele) {
$(this).attr('data-target', idx)
});
$(tab_item[0], tab_item_title[0]).addClass('current');
$(tab_content[0]).show();
console.log('test');
//Display current tab content
$(this).children('.at-tab-wrapper').children('.at-tab__item').click(function(ele) {
//debugger;
$(this).closest('.at-tabs').children('.at-tab-wrapper').children('.current').removeClass('current').children('.current').removeClass('current');
$(this).addClass('current');
$(this).find('.at-title__text').addClass('current');
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').hide();
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
ele.stopPropagation();
});
});
}
atscTabs();
.at-tab__item.current {
padding: 10px 20px;
background-color: #3c98ff;
}
.at-tab-wrapper {
display: flex;
padding: 28px 0px;
}
.at-title__text {
text-decoration: none;
font-size: 18px;
color: black;
}
.current .at-title__text {
color: #fff;
}
.at-tab__item {
padding: 10px 20px;
margin: 0 10px;
background: #e1e1e1;
}
.at-content-wrapper {
font-size: 16px;
padding: 25px;
background: #e1e1e1;
}
hr {
height: 5px;
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="at-tabs-d0ea0f6" class="at-tabs at-tab-default " data-position="default">
<div>
<div class="at-tab-wrapper">
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #1</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #2</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #3</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
</div>
</div>
<div class="at-content-wrapper">
<div class="at-content__item">
<p>Tab Content dfdfd</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
</div>
</div>
hi i fixed your click issue
function atscTabs() {
$('.at-tabs').each(function(index, item) {
var tab_item = $(this).find('.at-tab__item');
var tab_item_title = $(this).find('.at-title__text');
var tab_content = $(this).find('.at-content__item');
tab_content.hide();
//adding data attribute
tab_item_title.each(function(idx, ele) {
$(this).attr('data-target', idx)
});
$(tab_item[0], tab_item_title[0]).addClass('current');
$(tab_content[0]).show();
console.log('test');
//Display current tab content
$('.at-tab__item').click(function(ele) {
//debugger;
$('.at-tab__item').removeClass('current');
$(this).addClass('current');
$(this).find('.at-title__text').addClass('current');
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').hide();
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
ele.stopPropagation();
});
});
}
atscTabs();
.at-tab__item.current {
padding: 10px 20px;
background-color: #3c98ff;
}
.at-tab-wrapper {
display: flex;
padding: 28px 0px;
}
.at-title__text {
text-decoration: none;
font-size: 18px;
color: black;
}
.current .at-title__text {
color: #fff;
}
.at-tab__item {
padding: 10px 20px;
margin: 0 10px;
background: #e1e1e1;
}
.at-content-wrapper {
font-size: 16px;
padding: 25px;
background: #e1e1e1;
}
hr {
height: 5px;
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="at-tabs-d0ea0f6" class="at-tabs at-tab-default " data-position="default">
<div>
<div class="at-tab-wrapper">
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #1</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #2</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #3</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
</div>
</div>
<div class="at-content-wrapper">
<div class="at-content__item">
<p>Tab Content dfdfd</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
</div>
</div>

Animated div with scrollTop lose animation in scrolled page

So, how the code was supposed to run: if you just load the example, and click on "menu" on the bottom left, a new div cover the entire page, with another menu, sliding from the top. If you click the button again, same animation in reverse. Works fine!
But if you scroll the main page to the bottom, and then click on the menu again, it works, but when you click the menu button again, there is no animation. The menu div simply disappears. How can I fix that?
menu();
function menu(nm_pagina) {
var scroll;
$("#menu01").click(function() {
if ($(".menu_aberto").css("display") == 'none') {
$(".menu_aberto").slideDown(300);
scroll = $(window).scrollTop();
$(".miolo_relacionamentos").hide();
} else {
$(".menu_aberto").slideUp(300);
$('.' + nm_pagina).height('auto');
$(".miolo_relacionamentos").fadeIn(100);
$("html").scrollTop(scroll);
};
});
};
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
height: 100%;
max-width: 800px;
margin: 0 auto;
}
#ft_menu_botoes {
max-width: 800px;
position: fixed;
bottom: 0px;
width: 100%;
display: block;
background-color: #162F67;
height: 60px;
z-index: 10;
}
#ft_menu_botoes #menu01 {
float: left;
width: 25%;
font-size: 13px;
text-align: center;
padding: 10px 0 0 0;
color: white;
height: 100%;
transition: background-color 0.3s;
}
#ft_menu_botoes #menu01 .ico_menu {
color: white;
font-size: 30px;
}
#ft_menu_botoes #menu01:active {
background-color: #2855bb;
}
.menu_aberto {
z-index: 9;
max-width: 800px;
position: absolute;
margin: auto;
left: 0;
bottom: 0;
right: 0;
top: 0;
display: none;
background: #162F67;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(#2855bb, #162F67);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#2855bb, #162F67);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#2855bb, #162F67);
/* For Firefox 3.6 to 15 */
background: linear-gradient(#2855bb, #162F67);
/* Standard syntax */
width: 100%;
height: 100%;
overflow: auto;
display: none;
}
.menu_aberto #fecha_menu {
float: left;
border: 0;
background-color: transparent;
margin-top: 17px;
color: white;
width: 22%;
height: 100%;
}
.lista_rel {
margin: 10px auto 0 auto;
width: 100%;
border: 1px solid #162F67;
position: relative;
overflow: auto;
transition: opacity 0.3s;
}
.lista_rel:first {
margin-left: 20px;
}
.lista_rel .nome_empresa {
width: 100%;
background-color: #162F67;
margin: 0;
font-size: 14px;
font-weight: normal;
color: white;
padding: 5px 20px;
}
.lista_rel .nome_mae {
width: 100%;
background-color: #e3e5e7;
margin: 0;
font-size: 13px;
font-weight: normal;
padding: 5px 20px;
color: #525860;
}
.lista_rel .posicao_empresa {
width: 40px;
height: 44px;
float: left;
display: block;
position: relative;
}
.lista_rel .textos {
float: left;
width: calc(100% - 100px);
}
.lista_rel .textos .cnpj {
color: #162F67;
margin: 5px 5px 0 0;
font-size: 11px;
}
.lista_rel .textos .cnpj span {
font-size: 13px;
}
.lista_rel .textos .num_documentos {
color: #525860;
margin: 5px 10px 5px 20px;
text-align: right;
font-size: 12px;
}
.lista_rel .box_numero {
width: 60px;
height: 44px;
background-color: #1f4291;
float: right;
display: block;
}
.lista_rel .box_numero p {
color: white;
font-weight: bold;
font-size: 22px;
text-align: center;
margin-top: 10px;
margin-bottom: 0;
}
.header_mob_01 {
margin: 0;
background-color: #162F67;
display: block;
height: 50px;
position: fixed;
top: 0;
width: 100%;
max-width: 800px;
z-index: 5;
}
.rlc {
background-color: white;
height: auto;
padding: 0;
}
.miolo_relacionamentos {
width: 90%;
margin: 0 auto;
padding-top: 60px;
padding-bottom: 100px;
overflow: hidden;
}
/*# sourceMappingURL=fake_code.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- <link rel="stylesheet" href="./css/relacionamentos.css"> -->
<link rel="stylesheet" href="./css/fake_code.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="vertical"></div>
<div class="rlc">
<div class="header_mob_01"></div>
<div class="menu_aberto"></div>
<div class="miolo_relacionamentos">
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
</div>
<div id="ft_menu_botoes">
<div id="menu01"> <span class="icon-menu ico_menu"></span> <br> Menu </div>
</div>
</div>
<script>
</script>
</body>
</html>
PS: sorry for the clumsy job in the html/css. Just copied the original and started deleting things which do not matter here.

how to stop mouse hover function in small window?

why,even after applying java script function to stop mouse hover in small window
it's not working? and even when i click on menu it's background color changes to black.every thing seems fine still it's not working ??
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kewaunee</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- bootstarp css-->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- userdefined css -->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<!-- jquery file-->
<script src="assets/js/jquery.js"></script>
<!-- bootstarp js-->
<script src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="myscript.js"></script>
<style>
.navbar{
background-color: #3366cc;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="kewaunee.png"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">Home<b class="caret"></b>
<ul class="dropdown-menu">
<li>home 1</li>
<li>home2</li>
</ul>
</li>
<li class="dropdown">Master<b class="caret"></b>
<ul class="dropdown-menu">
<li>Add Region</li>
<li>Add Tax</li>
<li>Add Milestone</li>
<li>Add Customer</li>
</ul>
</li>
<li>Transaction</li>
<li>Report</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<!-- Trigger the modal with a button -->
<li><a data-toggle="modal" href="#myModal"><span class="glyphicon glyphicon-log-in" ></span> Login</a></li>
<!-- modal login form -->
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
</div>
<div class="modal-body">
<form role="form" method="post" action="#">
<div class="form-group-sm" class="col-xs-2">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group-sm" class="col-xs-2">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
Forgot password
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
<!--end of login form -->
</ul>
</div>
</div>
</nav>
<div class="container-fluid text-center">
<div class="row content">
<div class="col-sm-2 sidenav">
<p class="well">Master</p>
<p class="well">Transaction</p>
<p class="well">Report</p>
</div>
<div class="col-sm-8 text-left">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<hr>
<h3>Test</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-2 sidenav">
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>&#169 Kewaunee 2015</p>
</footer>
</body>
</html>
myscript.js
$(document).ready(function() {
if ($(window).width() > 768) {
$('.dropdown').on('mouseover', function(){
$('.dropdown-toggle', this).next('.dropdown-menu').show();
}).on('mouseout', function(){
$('.dropdown-toggle', this).next('.dropdown-menu').hide();
});
}
else {
$('.dropdown').off('mouseover').off('mouseout');
}
$('.dropdown-toggle').click(function() {
if ($(this).next('.dropdown-menu').is(':visible')) {
window.location = $(this).attr('href');
}
});
});
myscript.css
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
background-color: #3366cc;
}
.navbar.navbar-inverse{
position: relative;
top: 20px;
}
.navbar-brand{
padding-top: 5px;
}
.navbar-header
{
height:100%;
}
.navbar-inverse .navbar-nav>li>a
{
color: white;
}
.navbar-inverse .navbar-nav .dropdown>a:hover
{
background-color: red;
}
.dropdown:hover .dropdown-menu
{
background-color:#3366cc;
border: 1px solid blue;
}
.dropdown .dropdown-menu a
{
color: white;
}
.dropdown .dropdown-menu a:hover
{
background-color: red;
color: white;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content
{
height: 500px;
}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Dropdown menu*/
.caret-up {
width: 0;
height: 0;
border-left: 4px solid rgba(0, 0, 0, 0);
border-right: 4px solid rgba(0, 0, 0, 0);
border-bottom: 4px solid;
display: inline-block;
margin-left: 2px;
vertical-align: middle;
}
/* Set black background color, white text and some padding */
footer {
background-color: #3366cc;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
.modal-body{
height: 200px;
}
</style>
To me this seems to work fine, but if you want the effect not only on page refresh maybe you should in addition to $(document).ready() use also $(window).resize()

SlideToggle triggered by onScroll jQuery

I'm getting stuck on two things here that I'd appreciate the help with.
Background:
The banner displays a photo and some information. However this is not supposed to be everpresent. The banner has to, but not all the information. So there is an option to collapse it and expand it with an icon (like an accordion).
Problems
Because the panel has to be fixed, I had to position relative the content below it. Problem is, when I collapse it, the content is still respecting the position given. I'd like that content to respect the distance between each other instead so that if there is 20px between them, that would still be true on a collapsed view. (I tried margin and top) but no cigar.
And my main issue which I have no idea how to get it done is, I'd like the banner to collapse automatically on scroll. I know there is a scroll function out there, I just never used it before.
Here is my HTML:
<div id="header" class="header navbar navbar-fixed-top navbar-inverse" data-current-theme="navbar-inverse">
<p>menu & logo</p>
</div>
<div class="row">
<div class="col-xs-12">
<div class="banner clearfix">
<div class="collapser">
<i class="fa fa-chevron-up fa-fw collapse-icon"></i>
</div>
<div class="banner-info clearfix">
<div class="col-sm-12 col-md-2">
<div class="circle-container">
<img class="img-responsive" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTGjucaoN3fabOcumnr7RKTB3ICTJFLuLClnpiQUIR9oW4a11wb" alt="offender-img">
</div>
</div>
<div class="col-sm-12 col-md-10">
<div class="col-sm-12 col-md-3">
<div class="form-group">
<label class="control-label">Full Name</label>
<span>Floyd "Money" Mayweather</span>
</div>
<div class="form-group">
<label class="control-label">Some Label</label>
<span>Something Here</span>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="form-group">
<label class="control-label">Offender ID#</label>
<span>123569863</span>
</div>
<div class="form-group">
<label class="control-label">Longer Label Example</label>
<span>Something Here with an ellipsis</span>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="form-group">
<label class="control-label">Institution</label>
<span>Graterford</span>
</div>
<div class="form-group">
<label class="control-label">Some Link</label>
<span>Something Here</span>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="form-group">
<label class="control-label">Institution</label>
<span>Graterford</span>
</div>
<div class="form-group">
<label class="control-label">Some Link</label>
<span href="#"><p>Something Here</p></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container martop65">
<div class="row">
<div class="col-xs-12">
<p>Lorem ipsum dolor sit amet, et meis definitiones cum, audire iisque alterum no ius. Semper luptatum democritum has no, at sea audire inermis suscipiantur. Ei regione adipiscing ius. An est nonumy habemus, movet probatus recusabo eu eum. Hinc offendit te est, at his falli euripidis.
<br><br>
Pertinax scribentur ullamcorper in nec, sit dolor fastidii ei. Cetero pericula iudicabit no est, tale elitr ad has, eos sumo harum interesset eu. His ne fierent appareat. Vel paulo fierent eleifend id. Pri ut conceptam repudiandae theophrastus, enim periculis ius ex, te est numquam inimicus.
<br><br>
Congue deleniti deseruisse te eos, usu no brute laoreet. Nisl lorem zril eu qui. Vix tempor inimicus an, partem minimum cotidieque mel eu. Aperiam discere an mea, ea graecis scribentur mel, minim ludus saperet no vix. Has at sint sanctus. Eu docendi hendrerit liberavisse mel, ut eum viris voluptaria, eum error voluptua principes ex.
<br><br>
Vis te accumsan lucilius platonem. Possit prodesset eum in. No duo agam nullam detracto. At homero scaevola electram vel.</p>
</div>
</div>
</div>
CSS
body {
background-color: #dddddd;
}
.navbar {
border: none;
border-bottom: 2px solid #30373e;
font-size: 14px;
-webkit-box-shadow: 0 1px rgba(0,0,0,0.025);
box-shadow: 0 1px rgba(0,0,0,0.025);
z-index: 1040;
margin-bottom: 0;
height: 55px;
text-align:center;
color:#ccc;
}
.banner {
border: none;
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.07);
box-shadow: 0 2px 0 rgba(0,0,0,0.07);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
margin-bottom: 20px;
position: fixed;
width: 100%;
background: #101113;
padding: 20px;
display: block;
top: 55px;
border-radius:0;
z-index: 1;
}
.banner .collapser {
position: absolute;
bottom: 10px;
color: #bbb;
}
.banner .circle-container {
position: relative;
left: 35px;
text-align: center;
width: 110px;
height: 110px;
display: flex;
overflow: hidden;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
border-radius: 100%;
border: 3px solid #bbb;
}
.banner .banner-info label {
color: rgba(248,151,29,0.77);
}
.banner .banner-info span {
display: block;
color: #bbb;
white-space: nowrap;
width: 85%;
overflow: hidden;
text-overflow: ellipsis;
}
.martop65 {
/* margin-top: 240px;*/
position:relative;
top:240px;
}
JQUERY
$('.collapser').click(function() {
$collapser = $(this);
$banner = $collapser.parent().find('.banner-info .circle-container').add($collapser.parent().find(".col-md-10 > .col-md-3 > .form-group:nth-of-type(2)"));
$banner.slideToggle(500, function() {
$collapser.find('.collapse-icon').toggleClass('fa-chevron-up fa-chevron-down');
});
});
Here is a CODEPEN
Thanks!

Categories

Resources