Place border around element on scroll based on fade of another element

Question

I am creating a markdown report with code chunks. I have a plot that is created using a code chunk. The plot fades in as you scroll up and down the page. I want to place a border around the code chunk when the plot fades in and remove the border when the plot fades out. Essentially this highlights the code that created the plot that is fading in. I have given the specific code chunks that create plots the class "prefade". This is what I have at the moment:

$(window).scroll(function() {
  // Setting: Start fading halfway up the page
  var startPos = 0.62;
  
  var endPos = 0.9
  
  var x = $('.prefade').scrollTop();


  // Cache window object
  var $w = $(window);

  // Basically, we go through each element and check its relative position within the viewport
  $('.prefade').each(function() {

    // Get current relative position in viewport, based on the top edge
    var pos = $(this).offset().top - $w.scrollTop();
    
    var objectBottom = $(this).offset().top + $(this).outerHeight();
    
    // Get viewport height
    var vh = $w.height();

    if (pos < vh * startPos) {
      // If element has past the starting threshold, we fade it
      $(this).find('pre').addClass("focus")
    } else { 
      $(this).find('pre').removeClass("focus");
    }
    
  });
});

 $(window).scroll(function() { var startPos = 0.62; var x = $('.prefade').scrollTop(); // Cache window object var $w = $(window); // Basically, we go through each element and check its relative position within the viewport $('.prefade').each(function() { // Get current relative position in viewport, based on the top edge var pos = $(this).offset().top - $w.scrollTop(); var objectBottom = $(this).offset().top + $(this).outerHeight(); // Get viewport height var vh = $w.height(); if (pos < vh * startPos) { $(this).find('pre').addClass("focus") } else { $(this).find('pre').removeClass("focus"); } }); });

 h1 { margin-bottom: 0.3rem; font-weight: 800; display: block; font-size: 2em; margin-block-start: 0.67em; margin-block-end: 0.67em; margin-inline-start: 0px; margin-inline-end: 0px; } #TOC { width: 50%; background: #eee; opacity: 0.7; font-size: 0.8em; padding: 1em 2em; margin: 0 0 0.5em 0.5em; }.container-fluid.main-container { max-width: 600px; margin-left: 0; margin-right: auto; }.hljs { color: #c5c8c6; }.hljs { display: block; overflow-x: auto; padding: 0.5em; background: #1d1f21; } pre code { color: whitesmoke; background: inherit; white-space: inherit; border: 0; padding: 0; margin: 0; font-size: 15px; } code { border-radius: 2px; white-space: pre-wrap; color: #5e5e5e; background: #FFF7DD; border: 1px solid #fbf0cb; padding: 0 2px; } code, kbd, pre, samp { font-family: "Consolas", menlo, monospace; font-size: 92%; } code { vertical-align: bottom; } *, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } code { font-family: monospace; } #body-inner pre { white-space: pre-wrap; } pre { padding: 1rem; margin: 2rem 0; background: #1d1f21; border: 0; border-radius: 2px; line-height: 1.15; } pre { position: relative; color: #ffffff; } pre { font-family: monospace; white-space: pre-wrap; } body { color: var(--MAIN-TEXT-color);important: } body { font-size; 16px:important; color: #323232;important: text-align: justify, word-wrap, break-word } body { font-family, "Work Sans", "Helvetica", "Tahoma"; "Geneva": "Arial"; sans-serif: font-weight. 300; line-height: 1;6: font-size; 18px:important; } body { background: #fff. color; #777: } body { font-size. 1;05rem: line-height: 1;7: };root { --MAIN-TEXT-color: #323232; --MAIN-TITLES-TEXT-color: #5e5e5e; --MAIN-LINK-color: #599a3e; --MAIN-LINK-HOVER-color: #3f6d2c; --MAIN-ANCHOR-color: #599a3e; --MENU-HEADER-BG-color: #74b559; --MENU-HEADER-BORDER-color: #9cd484; --MENU-SEARCH-BG-color: #599a3e; --MENU-SEARCH-BOX-color: #84c767; --MENU-SEARCH-BOX-ICONS-color: #c7f7c4; --MENU-SECTIONS-ACTIVE-BG-color: #1b211c; --MENU-SECTIONS-BG-color: #222723; --MENU-SECTIONS-LINK-color: #ccc; --MENU-SECTIONS-LINK-HOVER-color: #e6e6e6; --MENU-SECTION-ACTIVE-CATEGORY-color: #777; --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #fff; --MENU-VISITED-color. #599a3e: --MENU-SECTION-HR-color: #18211c, }.hljs::selection: ;hljs span.:selection { background: #b7b7b7, }.hljs::selection: ;hljs span.:selection { background; #373b41: };triangle { position: fixed; left: 1015px; margin-bottom: 0; top: 60vh; overflow-x: hidden; right: 0; width: 0; height: 0; border-bottom: 350px solid #373b41; border-left. 350px solid transparent: color; #ffffff: };fade { position: relative; left: 600px; opacity: 0; width: 600px; z-index: 9; } #scatterplot { position: relative: top; -60vh: z-index; -1 } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity. 1, } to { opacity. 0: } };fadeIn: .fadeOut { animation-fill-mode; forwards. animation-duration: 0;7s. }:fadeOut { animation-name; fadeOut: };fadeIn { animation-name: fadeIn; } #scatterplotdetail { position. relative: top; -90vh: };focus { border-width: 8px, border-style, solid; border-color: rgb(200, 200, 106); }

 <div> dummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy text </div> <div id="plotting-data" class="section level2"> <h2><span class="header-section-number">3.2</span> Plotting data</h2> <div id="codescatter" class="prefade"> <pre class="r"><code class="hljs">ggplot(chocolate, aes(x= Review.Date, y = Rating, color = Cocoa.Percent)) + geom_point() + geom_jitter() + geom_smooth(method = <span class="hljs-string">'lm'</span>)+ scale_color_continuous(low = <span class="hljs-string">"#b69885"</span>, high = <span class="hljs-string">"#763411"</span>)+ theme_economist()+ theme(legend.key.width = unit(<span class="hljs-number">5</span>, <span class="hljs-string">"lines"</span>))</code></pre> </div> <div id="scatterplot" class="fade fadeOut"> <p><img src="https://i.imgur.com/Kdarrua.png" width="900" height="550"></p> </div> <script type="text/javascript"> const observerOptions = { root: null, rootMargin: "0px", threshold: 0.7 }; const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { // fade in observed elements that are in view entry.target.classList.replace('fadeOut', 'fadeIn'); entry.target.classList.replace() } else { // fade out observed elements that are not in view entry.target.classList.replace('fadeIn', 'fadeOut'); } }); }, observerOptions); const fadeElms = document.querySelectorAll('.fade'); fadeElms.forEach(el => observer.observe(el)); $(window).scroll(function() { // Setting: Start fading halfway up the page var startPos = 0.62; var endPos = 0.9 var x = $('.prefade').scrollTop(); // Cache window object var $w = $(window); // Basically, we go through each element and check its relative position within the viewport $('.prefade').each(function() { // Get current relative position in viewport, based on the top edge var pos = $(this).offset().top - $w.scrollTop(); var objectBottom = $(this).offset().top + $(this).outerHeight(); // Get viewport height var vh = $w.height(); if (pos < vh * startPos) { // If element has past the starting threshold, we fade it $(this).find('pre').addClass("focus") } else { $(this).find('pre').removeClass("focus"); } }); }); </script> <div class="plotDetail" id="scatterplotdetail"> <p>The code above creates a scatter plot. The graph shows that reviews have become more condensed over time. Initially, the reviews were more spread out earlier on. The early years had a lot of 1 and 2 star ratings. Conversely, there hasn't been a 5 star review since 2007.</p> <p>Interestingly, the cocoa percentage does not appear to have any correlation with the rating given.</p> <div class="triangle" style="color:#ffffff" id="corner"> </div> </div> </div>

Fiddle

What it looks like so far: here

Answer 1

I have only changed the remainder of the CSS in your Fiddle. Now you do the finetuning with timing and easing!

Main logic: define a 'transparent' border for your <pre> with border-color: rgba(200,200,106,0) (alpha value 0) and transition the color to fully visible border-color: rgba(200,200,106,1) (alpha value 1) when the <pre> turns .focus . Works nicely and it prevents the jumpiness as a side effect...( Fiddle )

from

.focus {
    border-width: 8px;
    border-style: solid;
    border-color: rgb(200, 200, 106);
}

to

pre {
    border-width: 8px;
    border-style: solid;
    border-color: rgba(200, 200, 106,0);
    transition: border-color 1s ease-in-out;
  
}
.focus {
    border-color: rgba(200, 200, 106,1);
}