mgcreative

Thank you so much! Since this code affects the header nav (and not the blog post featured image), and it's a split screen section, I just adjusted the gradient angle and only made it go halfway across. It's not perfect but it does the job! 

Here's the adjusted code I used if anyone is interested.
 
body[class*="type-blog"].view-item header#header {     background-image: linear-gradient(175deg, rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0) 60%); }  

Okay, I actually think I figured it out (may need some adjustment - open to suggestions!). But for anyone searching:
I used this code -- a Code box on the column, and then just adjusted the top px. 
Source: Will Myers
Add this to Custom CSS:
@media(min-width:767px) { .col.wm-sticky-column { position:sticky; top: 150px; } } Put this in a code box in the column you want (works for blog posts, even in fluid engine):
<div class="wm-sticky-column"></div> <script> (function() { function initSticky() { let stickyStarts = document.querySelectorAll('.wm-sticky-column'); stickyStarts.forEach(el => { let col = el.closest('.col'); if (!col) return; col.classList.add('wm-sticky-column'); }); } window.addEventListener('DOMContentLoaded', initSticky); }()); </script>