Синхронизация прокрутки двух div по вертикали. (прокручивая два div вместе)

Question

У меня есть текст в поле, которое можно прокручивать, и за пределами этого поля также расположены заголовки, которые относятся к определенным параграфам / разделам в тексте. Теперь я хочу, чтобы при прокрутке текста внутри поля заголовки за пределами окна также прокручивались. Я ищу способ связать определенную часть текста с определенным заголовком, чтобы он прокручивался вместе с текстом.

Вот скриншот:

А вот мой код для этого раздела:

<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>

Заранее спасибо за помощь!

Answer 1

Я думаю, что для этого дизайна самой простой вещью может быть удержание заголовков внутри одного и того же div и использование отрицательного левого поля, чтобы создать иллюзию, что они находятся снаружи. Любое решение JS потребовало бы использования прослушивателя с прокруткой, который, вероятно, вызвал бы проблемы с производительностью, если бы не регулировался, или выглядел неуклюже, если регулировался. У меня нет времени кодировать примерную версию, но, надеюсь, это поможет