<div class="content-section content-section--sticky ">
<div class="content-section__title text-button">tartu</div>
<div class="content-section__content">
<div class="sticky-content ">
<div class="sticky-content__text text">
Muinaslinnus asus Tartus juba esimesel aastatuhandel eKr. 1030. aastal vallutasid linna Kiievi vürsti Jaroslav Targa väed, millist fakti kroonikates loetakse Tartu esmamainimiseks kirjalikes allikates. Läbi ajaloo on uhke kindlus vaenlase rünnakule sagedasti vastu pannud, sagedasti aga alistunud, et sõja häda ja viletsus vaheldusid rahuaegse külluse ja ülemeelikusega. Linn on kuulunud Kiievi vürstiriigile, Saksamaale, Venemaale, Poolale, Rootsile. 1280. aastatel võetakse Tartu Hansa Liidu liikmeks ning kujuneb õitsvaks kaubalinnaks, mille õitsengu lõpetas Liivi sõda. Aastatel 1763–1767 ehitatakse Tartu välja Vene impeeriumi kindluslinnana ja ta omandab suure tähenduse sõlmpunktina Peterburi-Königsbergi postimaanteel. 1918. aastal langeb Tartu Saksa vägede kätte. 1918–1919 aastavahetusel vabastavad Eesti väed Tartu ja Eestist saab iseseisev vabariik kuni teise maailmasõjani. 1940. aastal algab Nõukogude okupatsioon Eestis, mis kestab 1991. aastani. Muinaslinnus asus Tartus juba esimesel aastatuhandel eKr. 1030. aastal vallutasid linna Kiievi vürsti Jaroslav Targa väed, millist fakti kroonikates loetakse Tartu esmamainimiseks kirjalikes allikates. Läbi ajaloo on uhke kindlus vaenlase rünnakule sagedasti vastu pannud, sagedasti aga alistunud, et sõja häda ja viletsus vaheldusid rahuaegse külluse ja ülemeelikusega. Linn on kuulunud Kiievi vürstiriigile, Saksamaale, Venemaale, Poolale, Rootsile. 1280. aastatel võetakse Tartu Hansa Liidu liikmeks ning kujuneb õitsvaks kaubalinnaks, mille õitsengu lõpetas Liivi sõda. Aastatel 1763–1767 ehitatakse Tartu välja Vene impeeriumi kindluslinnana ja ta omandab suure tähenduse sõlmpunktina Peterburi-Königsbergi postimaanteel. 1918. aastal langeb Tartu Saksa vägede kätte. 1918–1919 aastavahetusel vabastavad Eesti väed Tartu ja Eestist saab iseseisev vabariik kuni teise maailmasõjani. 1940. aastal algab Nõukogude okupatsioon Eestis, mis kestab 1991. aastani. Muinaslinnus asus Tartus juba esimesel aastatuhandel eKr. 1030. aastal vallutasid linna Kiievi vürsti Jaroslav Targa väed, millist fakti kroonikates loetakse Tartu esmamainimiseks kirjalikes allikates. Läbi ajaloo on uhke kindlus vaenlase rünnakule sagedasti vastu pannud, sagedasti aga alistunud, et sõja häda ja viletsus vaheldusid rahuaegse külluse ja ülemeelikusega. Linn on kuulunud Kiievi vürstiriigile, Saksamaale, Venemaale, Poolale, Rootsile. 1280. aastatel võetakse Tartu Hansa Liidu liikmeks ning kujuneb õitsvaks kaubalinnaks, mille õitsengu lõpetas Liivi sõda. Aastatel 1763–1767 ehitatakse Tartu välja Vene impeeriumi kindluslinnana ja ta omandab suure tähenduse sõlmpunktina Peterburi-Königsbergi postimaanteel. 1918. aastal langeb Tartu Saksa vägede kätte. 1918–1919 aastavahetusel vabastavad Eesti väed Tartu ja Eestist saab iseseisev vabariik kuni teise maailmasõjani. 1940. aastal algab Nõukogude okupatsioon Eestis, mis kestab 1991. aastani. Muinaslinnus asus Tartus juba esimesel aastatuhandel eKr. 1030. aastal vallutasid linna Kiievi vürsti Jaroslav Targa väed, millist fakti kroonikates loetakse Tartu esmamainimiseks kirjalikes allikates. Läbi ajaloo on uhke kindlus vaenlase rünnakule sagedasti vastu pannud, sagedasti aga alistunud, et sõja häda ja viletsus vaheldusid rahuaegse külluse ja ülemeelikusega. Linn on kuulunud Kiievi vürstiriigile, Saksamaale, Venemaale, Poolale, Rootsile. 1280. aastatel võetakse Tartu Hansa Liidu liikmeks ning kujuneb õitsvaks kaubalinnaks, mille õitsengu lõpetas Liivi sõda. Aastatel 1763–1767 ehitatakse Tartu välja Vene impeeriumi kindluslinnana ja ta omandab suure tähenduse sõlmpunktina Peterburi-Königsbergi postimaanteel. 1918. aastal langeb Tartu Saksa vägede kätte. 1918–1919 aastavahetusel vabastavad Eesti väed Tartu ja Eestist saab iseseisev vabariik kuni teise maailmasõjani. 1940. aastal algab Nõukogude okupatsioon Eestis, mis kestab 1991. aastani. Muinaslinnus asus Tartus juba esimesel aastatuhandel eKr. 1030. aastal vallutasid linna Kiievi vürsti Jaroslav Targa väed, millist fakti kroonikates loetakse Tartu esmamainimiseks kirjalikes allikates. Läbi ajaloo on uhke kindlus vaenlase rünnakule sagedasti vastu pannud, sagedasti aga alistunud, et sõja häda ja viletsus vaheldusid rahuaegse külluse ja ülemeelikusega. Linn on kuulunud Kiievi vürstiriigile, Saksamaale, Venemaale, Poolale, Rootsile. 1280. aastatel võetakse Tartu Hansa Liidu liikmeks ning kujuneb õitsvaks kaubalinnaks, mille õitsengu lõpetas Liivi sõda. Aastatel 1763–1767 ehitatakse Tartu välja Vene impeeriumi kindluslinnana ja ta omandab suure tähenduse sõlmpunktina Peterburi-Königsbergi postimaanteel. 1918. aastal langeb Tartu Saksa vägede kätte. 1918–1919 aastavahetusel vabastavad Eesti väed Tartu ja Eestist saab iseseisev vabariik kuni teise maailmasõjani. 1940. aastal algab Nõukogude okupatsioon Eestis, mis kestab 1991. aastani. Muinaslinnus asus Tartus juba esimesel aastatuhandel eKr. 1030. aastal vallutasid linna Kiievi vürsti Jaroslav Targa väed, millist fakti kroonikates loetakse Tartu esmamainimiseks kirjalikes allikates. Läbi ajaloo on uhke kindlus vaenlase rünnakule sagedasti vastu pannud, sagedasti aga alistunud, et sõja häda ja viletsus vaheldusid rahuaegse külluse ja ülemeelikusega. Linn on kuulunud Kiievi vürstiriigile, Saksamaale, Venemaale, Poolale, Rootsile. 1280. aastatel võetakse Tartu Hansa Liidu liikmeks ning kujuneb õitsvaks kaubalinnaks, mille õitsengu lõpetas Liivi sõda. Aastatel 1763–1767 ehitatakse Tartu välja Vene impeeriumi kindluslinnana ja ta omandab suure tähenduse sõlmpunktina Peterburi-Königsbergi postimaanteel. 1918. aastal langeb Tartu Saksa vägede kätte. 1918–1919 aastavahetusel vabastavad Eesti väed Tartu ja Eestist saab iseseisev vabariik kuni teise maailmasõjani. 1940. aastal algab Nõukogude okupatsioon Eestis, mis kestab 1991. aastani.
</div>
<div class="sticky-content__images">
<div class="sticky-content__image-wrapper">
<figure class="image content-section--fluid sticky-content__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20750%20500%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/750x500 750w, //via.placeholder.com/1500x1000 1500w" data-sizes="auto" alt="image alt text" class="image__img lazyload">
</figure>
<figure class="image content-section--fluid sticky-content__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20750%20500%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/750x500/green 750w, //via.placeholder.com/1500x1000/green 1500w" data-sizes="auto" alt="image alt text" class="image__img lazyload">
</figure>
</div>
</div>
</div>
</div>
</div>
{% set sectionContent %}
<div class="sticky-content {{ class }} {{ modifier }}">
{% if data.text %}
<div class="sticky-content__text text">
{{ data.text }}
</div>
{% endif %}
{% if data.images %}
<div class="sticky-content__images">
<div class="sticky-content__image-wrapper">
{% for image in data.images %}
{% include '@image' with { modifier: 'content-section--fluid', class: 'sticky-content__image', data: image|srcset('750x750f')} %}
{% endfor %}
</div>
</div>
{% endif %}
</div>
{% endset %}
{% include '@content-section' with { modifier: 'content-section--sticky', data: {title: data.title, content: sectionContent}} %}
{
"language": "en-US",
"data": {
"title": "tartu",
"text": "Muinaslinnus asus Tartus juba esimesel aastatuhandel eKr. 1030. aastal vallutasid linna Kiievi vürsti Jaroslav Targa väed, millist fakti kroonikates loetakse Tartu esmamainimiseks kirjalikes allikates. Läbi ajaloo on uhke kindlus vaenlase rünnakule sagedasti vastu pannud, sagedasti aga alistunud, et sõja häda ja viletsus vaheldusid rahuaegse külluse ja ülemeelikusega. Linn on kuulunud Kiievi vürstiriigile, Saksamaale, Venemaale, Poolale, Rootsile. 1280. aastatel võetakse Tartu Hansa Liidu liikmeks ning kujuneb õitsvaks kaubalinnaks, mille õitsengu lõpetas Liivi sõda. Aastatel 1763–1767 ehitatakse Tartu välja Vene impeeriumi kindluslinnana ja ta omandab suure tähenduse sõlmpunktina Peterburi-Königsbergi postimaanteel. 1918. aastal langeb Tartu Saksa vägede kätte. 1918–1919 aastavahetusel vabastavad Eesti väed Tartu ja Eestist saab iseseisev vabariik kuni teise maailmasõjani. 1940. aastal algab Nõukogude okupatsioon Eestis, mis kestab 1991. aastani. Muinaslinnus asus Tartus juba esimesel aastatuhandel eKr. 1030. aastal vallutasid linna Kiievi vürsti Jaroslav Targa väed, millist fakti kroonikates loetakse Tartu esmamainimiseks kirjalikes allikates. Läbi ajaloo on uhke kindlus vaenlase rünnakule sagedasti vastu pannud, sagedasti aga alistunud, et sõja häda ja viletsus vaheldusid rahuaegse külluse ja ülemeelikusega. Linn on kuulunud Kiievi vürstiriigile, Saksamaale, Venemaale, Poolale, Rootsile. 1280. aastatel võetakse Tartu Hansa Liidu liikmeks ning kujuneb õitsvaks kaubalinnaks, mille õitsengu lõpetas Liivi sõda. Aastatel 1763–1767 ehitatakse Tartu välja Vene impeeriumi kindluslinnana ja ta omandab suure tähenduse sõlmpunktina Peterburi-Königsbergi postimaanteel. 1918. aastal langeb Tartu Saksa vägede kätte. 1918–1919 aastavahetusel vabastavad Eesti väed Tartu ja Eestist saab iseseisev vabariik kuni teise maailmasõjani. 1940. aastal algab Nõukogude okupatsioon Eestis, mis kestab 1991. aastani. Muinaslinnus asus Tartus juba esimesel aastatuhandel eKr. 1030. aastal vallutasid linna Kiievi vürsti Jaroslav Targa väed, millist fakti kroonikates loetakse Tartu esmamainimiseks kirjalikes allikates. Läbi ajaloo on uhke kindlus vaenlase rünnakule sagedasti vastu pannud, sagedasti aga alistunud, et sõja häda ja viletsus vaheldusid rahuaegse külluse ja ülemeelikusega. Linn on kuulunud Kiievi vürstiriigile, Saksamaale, Venemaale, Poolale, Rootsile. 1280. aastatel võetakse Tartu Hansa Liidu liikmeks ning kujuneb õitsvaks kaubalinnaks, mille õitsengu lõpetas Liivi sõda. Aastatel 1763–1767 ehitatakse Tartu välja Vene impeeriumi kindluslinnana ja ta omandab suure tähenduse sõlmpunktina Peterburi-Königsbergi postimaanteel. 1918. aastal langeb Tartu Saksa vägede kätte. 1918–1919 aastavahetusel vabastavad Eesti väed Tartu ja Eestist saab iseseisev vabariik kuni teise maailmasõjani. 1940. aastal algab Nõukogude okupatsioon Eestis, mis kestab 1991. aastani. Muinaslinnus asus Tartus juba esimesel aastatuhandel eKr. 1030. aastal vallutasid linna Kiievi vürsti Jaroslav Targa väed, millist fakti kroonikates loetakse Tartu esmamainimiseks kirjalikes allikates. Läbi ajaloo on uhke kindlus vaenlase rünnakule sagedasti vastu pannud, sagedasti aga alistunud, et sõja häda ja viletsus vaheldusid rahuaegse külluse ja ülemeelikusega. Linn on kuulunud Kiievi vürstiriigile, Saksamaale, Venemaale, Poolale, Rootsile. 1280. aastatel võetakse Tartu Hansa Liidu liikmeks ning kujuneb õitsvaks kaubalinnaks, mille õitsengu lõpetas Liivi sõda. Aastatel 1763–1767 ehitatakse Tartu välja Vene impeeriumi kindluslinnana ja ta omandab suure tähenduse sõlmpunktina Peterburi-Königsbergi postimaanteel. 1918. aastal langeb Tartu Saksa vägede kätte. 1918–1919 aastavahetusel vabastavad Eesti väed Tartu ja Eestist saab iseseisev vabariik kuni teise maailmasõjani. 1940. aastal algab Nõukogude okupatsioon Eestis, mis kestab 1991. aastani. Muinaslinnus asus Tartus juba esimesel aastatuhandel eKr. 1030. aastal vallutasid linna Kiievi vürsti Jaroslav Targa väed, millist fakti kroonikates loetakse Tartu esmamainimiseks kirjalikes allikates. Läbi ajaloo on uhke kindlus vaenlase rünnakule sagedasti vastu pannud, sagedasti aga alistunud, et sõja häda ja viletsus vaheldusid rahuaegse külluse ja ülemeelikusega. Linn on kuulunud Kiievi vürstiriigile, Saksamaale, Venemaale, Poolale, Rootsile. 1280. aastatel võetakse Tartu Hansa Liidu liikmeks ning kujuneb õitsvaks kaubalinnaks, mille õitsengu lõpetas Liivi sõda. Aastatel 1763–1767 ehitatakse Tartu välja Vene impeeriumi kindluslinnana ja ta omandab suure tähenduse sõlmpunktina Peterburi-Königsbergi postimaanteel. 1918. aastal langeb Tartu Saksa vägede kätte. 1918–1919 aastavahetusel vabastavad Eesti väed Tartu ja Eestist saab iseseisev vabariik kuni teise maailmasõjani. 1940. aastal algab Nõukogude okupatsioon Eestis, mis kestab 1991. aastani. Muinaslinnus asus Tartus juba esimesel aastatuhandel eKr. 1030. aastal vallutasid linna Kiievi vürsti Jaroslav Targa väed, millist fakti kroonikates loetakse Tartu esmamainimiseks kirjalikes allikates. Läbi ajaloo on uhke kindlus vaenlase rünnakule sagedasti vastu pannud, sagedasti aga alistunud, et sõja häda ja viletsus vaheldusid rahuaegse külluse ja ülemeelikusega. Linn on kuulunud Kiievi vürstiriigile, Saksamaale, Venemaale, Poolale, Rootsile. 1280. aastatel võetakse Tartu Hansa Liidu liikmeks ning kujuneb õitsvaks kaubalinnaks, mille õitsengu lõpetas Liivi sõda. Aastatel 1763–1767 ehitatakse Tartu välja Vene impeeriumi kindluslinnana ja ta omandab suure tähenduse sõlmpunktina Peterburi-Königsbergi postimaanteel. 1918. aastal langeb Tartu Saksa vägede kätte. 1918–1919 aastavahetusel vabastavad Eesti väed Tartu ja Eestist saab iseseisev vabariik kuni teise maailmasõjani. 1940. aastal algab Nõukogude okupatsioon Eestis, mis kestab 1991. aastani.",
"images": [
{
"srcset": "//via.placeholder.com/750x500 750w, //via.placeholder.com/1500x1000 1500w",
"alt": "image alt text",
"crop": false,
"aspectRatio": {
"width": 750,
"height": 500
}
},
{
"srcset": "//via.placeholder.com/750x500/green 750w, //via.placeholder.com/1500x1000/green 1500w",
"alt": "image alt text",
"aspectRatio": {
"width": 750,
"height": 500
}
}
]
}
}
.sticky-content {
display: flex;
flex-direction: column;
@include bp(sm-min) {
flex-direction: row;
}
}
.sticky-content__text {
padding: 32px 16px 24px;
@include bp(sm-min) {
padding: 40px 32px 150px;
max-width: 50%;
}
}
.sticky-content__images {
padding-bottom: 80px;
@include bp(sm-min) {
max-width: 50%;
margin: 40px 0 40px 32px;
flex-grow: 1;
}
}
.sticky-content__image {
opacity: 1;
transition: opacity $transition-duration $transition-easing;
@include bp(sm-min) {
opacity: 0;
}
& + & {
position: absolute;
top: 0;
left: 0;
right: 0;
opacity: 0;
}
&.is-visible {
opacity: 1;
}
}
.sticky-content__image-wrapper {
position: sticky; /* stylelint-disable-line plugin/no-unsupported-browser-features */
top: 160px;
right: 0;
}
.image__img {
.sticky-content & {
width: 100%;
}
}
import './sticky-content.scss';
import Component from '@component';
interface IStickyContentSettings {
containerClass: string
wrapperClass: string
imageClass: string
isVisibleClass: string
}
export default class StickyContent extends Component {
static initSelector: string = '.sticky-content';
settings: IStickyContentSettings;
container: JQuery;
wrapper: JQuery;
images: JQuery;
constructor(element: HTMLElement) {
super(element);
this.settings = {
containerClass: 'sticky-content__images',
imageClass: 'sticky-content__image',
isVisibleClass: 'is-visible',
wrapperClass: 'sticky-content__image-wrapper',
};
this.container = this.element.find('.' + this.settings.containerClass);
this.wrapper = this.element.find('.' + this.settings.wrapperClass);
this.images = this.element.find('.' + this.settings.imageClass);
if (this.images.length > 0) {
this.images[0].classList.add(this.settings.isVisibleClass);
}
if (this.images.length > 1) {
this.init();
}
}
init(): void {
window.addEventListener('scroll', this.scrollHandler.bind(this));
this.scrollHandler();
}
scrollHandler(): void {
const containerRect: DOMRect = this.container[0].getBoundingClientRect();
const wrapperRect: DOMRect = this.wrapper[0].getBoundingClientRect();
const marginTop: number = parseInt(this.container.css('marginTop'));
const totalScrollHeight: number = this.container[0].offsetHeight - (2 * marginTop) - (wrapperRect.height);
const scrollHeight: number = (wrapperRect.top + wrapperRect.height / 2) - ((containerRect.top) + wrapperRect.height / 2);
const percent: number = (scrollHeight) / (totalScrollHeight);
const numberOfImages: number = this.images.length;
const activeImage: number = Math.min(numberOfImages - 1, Math.floor(numberOfImages * percent));
this.images.removeClass(this.settings.isVisibleClass);
this.images[activeImage].classList.add(this.settings.isVisibleClass);
this.wrapper.css('height', this.images[activeImage].offsetHeight + 'px');
}
}