try4

elze_styles.css

@@ -29,7 +29,7 @@ body {
 .right {
   right: 0;
   background: transparent;
-  overflow-x: hidden; /* Keep overflow-x:hidden to disable horizontal scrolling */
+  overflow: hidden; /* Keep overflow-x:hidden to disable horizontal scrolling */
 }
 
 /* Style the overlaid scrollbar */
@@ -51,6 +51,7 @@ div.media-block {
   height: 100vh;
 }
 
+
 div.media-block video,
 div.media-block img {
   width: 100%;

index.html

@@ -108,9 +108,12 @@
 
 
         <p>
+
+
+          <div id="Abstract" class="anchor"> 
           <H3 class="heading-font" > Abstract </H3>
           Within my thesis I explore my alter ego, using the analogy of the Pleaser Heel as an entry to her, Zarissa. I elaborate how my alter ego was built based on my upbringing, acquired aesthetics and materialistic desires. I go on to analyze the deeper layers behind my alter ego and argue that she utilizes her sexuality, specifically by evolving in the spheres of erotic entertainment and its relation to sex work, to reject the patriarchy and the male gaze. I conclude with reflections on the intersections of sexual repression, shame and whorephobia, all of which I aim to divert through my alter ego, a personal research into bodily autonomy, female sexual power and community. 
-
+        </div>
         </p>
 
         <h3 class="heading-font"> Introduction </h3>
@@ -291,6 +294,11 @@ <H3 class="heading-font" > REFERENCES </H3>
           </video>
         </div>
 
+
+        <div class="media-block" id="Abstract">
+          <img src="assets/images/abstract.jpg" width="1080px" height="1400px"/>
+        </div>
+
 
         <div class="media-block" id="image1">
           <img src="assets/images/childme.jpeg" width="1080px" height="1400px"/>

script.js

@@ -3,27 +3,57 @@ document.addEventListener("DOMContentLoaded", function() {
   const rightSplit = document.getElementById('rightSplit');
   const mediaBlocks = document.querySelectorAll('.media-block');
 
-  leftSplit.addEventListener('scroll', function () {
+  let currentMediaBlock = null;
+
+  // Function to show the corresponding media block in the right split
+  function showCorrespondingMedia() {
     const scrollTop = leftSplit.scrollTop;
     const windowHeight = leftSplit.clientHeight;
     const fullHeight = leftSplit.scrollHeight;
     const percentScrolled = (scrollTop / (fullHeight - windowHeight)) * 100;
     const indexToShow = Math.floor((percentScrolled / 100) * mediaBlocks.length);
 
-    // Hide all images in the right split
-    mediaBlocks.forEach((block) => {
-      block.style.display = 'none';
-    });
+    const mediaBlockToShow = mediaBlocks[indexToShow];
 
-    // Show the corresponding image in the right split
-    const correspondingImage = document.getElementById('image' + (indexToShow + 1));
-    if (correspondingImage) {
-      correspondingImage.style.display = 'block';
+    // Check if the media block to show is different from the current one
+    if (mediaBlockToShow !== currentMediaBlock) {
+      // Hide the current media block
+      if (currentMediaBlock) {
+        currentMediaBlock.style.display = 'none';
+      }
+
+      // Show the new media block
+      mediaBlockToShow.style.display = 'block';
+      currentMediaBlock = mediaBlockToShow;
     }
-  });
+  }
+
+  // Call the function to initially show the corresponding media block
+  showCorrespondingMedia();
+
+  // Call the function whenever scrolling occurs in the left split
+  leftSplit.addEventListener('scroll', showCorrespondingMedia);
+});
 
-  // Sync the scroll position of the right split with the left split
-  rightSplit.addEventListener('scroll', function () {
-    leftSplit.scrollTop = rightSplit.scrollTop;
+document.addEventListener("DOMContentLoaded", function() {
+  const leftSplit = document.getElementById('leftSplit');
+  const rightSplit = document.getElementById('rightSplit');
+
+  // Function to handle smooth scrolling
+  function smoothScrollTo(target) {
+    rightSplit.scrollTo({
+      top: target.offsetTop,
+      behavior: 'smooth'
+    });
+  }
+
+  // Event listener for links in the left split
+  leftSplit.addEventListener('click', function(event) {
+    if (event.target.tagName === 'A') {
+      event.preventDefault();
+      const targetId = event.target.getAttribute('href').substring(1); // Remove the '#' from the href
+      const targetElement = document.getElementById(targetId);
+      smoothScrollTo(targetElement);
+    }
   });
 });