this will hard to get i see:
https://webers-testseite.de/sandy/
because all three columns are inside the same parent container – the stick will not end when the 1/1 column reaches the top.

________

but you can have a page/post without sidebar and use then color-sections – the sidebar then is shown as content element : widget area:
click to enlarge the preview:

see code and example page:
https://webers-testseite.de/sandy-2/

you can have on child-theme functions.php :

function add_slug_body_class( $classes ) {
global $post;
  if ( isset( $post ) ) {
    $classes[] = $post->post_type . '_' . $post->post_name;
  }
  return $classes;
}
add_filter( 'body_class', 'add_slug_body_class' );

then a post/portfolio/page will have on body (#top) an additional class f.e.
post_name-of-my-post
portfolio_name-of-my-post
page_name-of-my-post

maybe that helps you to better select.
On your example page it will then be : post_sand-box-post

why do i include to that class the post-type? because it might be that you have post and a page with same slug – then you can differ between them
if you do not need that – remove the instertion of the post-type:

function add_slug_body_class( $classes ) {
global $post;
  if ( isset( $post ) ) {
    $classes[] = $post->post_name;
  }
  return $classes;
}
add_filter( 'body_class', 'add_slug_body_class' );

because of there is only a layout with columns.
So please go and set a 1/1 column below that – to see how enfold handles the rest.

the first column now can be select via:
#top.postid-335 .entry-content-wrapper .submenu-col instead of #top.postid-335 .entry-content-wrapper .flex_column.first

on your layout there is no parent element that you can give a custom class to. So we had to work with page/post IDs
If you have that on all single posts – than we can select more global as f.e.: single-post etc.

PS : there is no slug of the post on default enfold.

you can have both – column sticky and sidebar sticky

.responsive body#top.postid-335 {
    overflow-x: visible;
}

#top.postid-335 #wrap_all {
    overflow: visible;
}

@media only screen and (min-width: 768px){  
  #top.postid-335 .entry-content-wrapper {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
  }

  #top.postid-335 .entry-content-wrapper .flex_column.first{      
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 100px;   /*** depends on your header-height after scrolling ***/
    min-width: 120px;  /*** you can have here absolute Values  ***/
  }
  #top.postid-335 #main div > .container {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
  }

  #top.postid-335 .sidebar{
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 60px;   /*** depends on your header-height after scrolling ***/
    width: 30% !important; /*** you can have here different width than on global settings of Enfold ***/
  }
}

so for that page:

.responsive body#top.postid-335 {
    overflow-x: visible;
}

#top.postid-335 #wrap_all {
    overflow: visible;
}

@media only screen and (min-width: 768px){  
  #top.postid-335 .entry-content-wrapper {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
  }

  #top.postid-335 .entry-content-wrapper .flex_column.first{      
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 100px;   /*** depends on your header-height after scrolling ***/
    min-width: 120px;  /*** you can have here absolute or relative Values ***/
  }
}

to be more selectiv using custom classes on some elements.
and keep in mind, that the element is sticky only in its parent container. If the parent container is the same height as the f.e. color-section it looks like the sticky element is fixed inside that container:
https://webers-testseite.de/sticky-elements/
PS: if you break your columns at 990px you had to adjust that media query inside the snippet.