I have a specific setup where I have a text box that is scrollable, and outside of this box are headings that correspond to different sections in the text. I am looking for a way to synchronize the scrolling of the text inside the box with the headings outside the box. Essentially, I want certain text sections to be linked to specific headings so that they scroll together.
Check out this screenshot for reference: https://i.sstatic.net/5qLLK.jpg
Below is the code snippet for this scenario:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="section">
<div class="container-fluid">
<div class="row">
<div class="col-sm-5">
<img src="images/unterschiede.png" id="unterschiedeImg" class="img-responsive">
</div>
<div class="col-sm-7">
<div class="col-sm-2 padding0 hidden-xs">
<p class="ij-p heading-p text-center margintop200">Schreibweise </p>
<p class="ij-p heading-p text-center margintop320">Grundformen</p>
</div>
<div class="col-sm-10 onlyPaddingRight20 ">
<div class="borderwhite">
<p class="ij-p heading-p visible-xs">Schreibweise</p>
<p class="ij-p">Persisch ist im Deutschen die Bezeichnung der Amtssprache im Iran. Offiziell heißt sie dort Zaban-e Farsi «زبان فارسی». Farsi gehört zur indoeuropäischen Sprachfamilie und wird der iranischen Untergruppe zugeordnet.</p>
<p class="ij-p">Die Farsi Schriftzeichen werden <a class="basicLink" onclick="displayToggel()">von rechts nach links geschrieben und gelesen</a>. Die zahlen jedoch werden wie im Lateinischen von rechts nach links geschrieben, „Parsi“ und „Persisch“ sind beide Synonyme von „Farsi“, nur dass sie genauer gesagt in Bezug auf die zeitgeschichtliche Sprachentwicklung von Farsi verwendet werden. Der Begriff „Parsi“ hat sich wegen des fehlenden P-Lauts im Laufe der Jahrhunderte zu „Farsi“ verwandelt. Das älteste Beweisdokument des Altpersischen lässt sich auf das 6. Jh. v. Chr. zurückverfolgen. </p>
<p class="ij-p heading-p visible-xs">Grundformen</p>
<p class="ij-p">Das persische Alphabet „Alebfa“ besteht aus 32 Buchstaben, die man in 18 Grundformen einteilen kann. Es ähnelt sehr dem arabischen Alphabet, wurde aber modifiziert. Konkret wurden vier weitere Buchstaben hinzugefügt und zwei Buchstaben in der Schreibweise verändert. Diakritischezeichen werden selten in der persischen Sprache eingesetzt. Ausnahmen: Fremdwörter, Grundschulbücher, der heilige Koran.
</br>
</br>Anatomie </br>
</br>Glyphen im Lateinischen stehen normalerweise auf einer Grundlinie mit fünf vertikalen Hauptbezugsebenen: Grundlinie, x-Höhe, Oberlänge, Unterlänge und Kappenhöhe. Im Gegensatz dazu sind die persischen Glyphen weniger eingeschränkt, da den Typedesignern eine größere Anzahl an unsichtbaren typografischen Ebenen zur Verfügung stehen. Die kalligraphischen Regeln für sich in typografische Richtlinien zu übersetzen.
</br>Anstelle des klassischen Grundlinienaufbaus der lateinischen Schrift, werden in der persischen Anatomie für die Oberlänge die Begriffe Himmel 1 und Himmel 2 (خط ارش), für die x-Höhe die Augenhöhe 1 (کرسی بصری) für die Grundlinie (خط کرسی)der Begriff Augenhöhe 2 und für die Unterlänge der Begriff Boden (خط پایین) verwendet. Das Liniensystem der persischen Anatomie, lässt sich zudem durch zwei weitere unsichtbare Linien ergänzen Imaginäre Ebene (کرسی فرضی), wodurch dem Schriftgestalter eine Vielzahl an kreativen gestalterischen Möglichkeiten offen steht. Eine humanistische Schriftart, die von den kursiven Naskh-Skripten abgeleitet ist, kann bis zu zwölf imaginäre typografische Ebenen verwenden. Das bedeutet, dass Schriftgestalter, die aus dem lateinischen Schriftraum stammen, ein gewisses Grundwissen über persische kalligraphische Stile und Systeme besitzen müssen, um kreativ sein zu können. Die Schriftzeichen haben eine Kombination aus verbundenen und eigenständigen Buchstaben. Es gibt Regeln, für die Buchstabenformen gestreckt (Variabel) werden können.</p>
</div>
</div>
</div>
</div>
</div>
</div>Thank you for your assistance!