Dynamically open and close div on scroll

Question

What I am trying to achieve is that my div, slowly closes as one scrolls down, and then as one scrolls up it should slowly open and expand! I have achieve the first part but i am straggling with the second part, that's is the div is not closing as i scroll up! Please take a look at this Codepen to fully understand!

Below are my snippets!

var img = $('.banner_img_desktop').find('img');
		function isScrolledIntoView(elem) {
   			var docViewTop = $(window).scrollTop();
    		var docViewBottom = docViewTop + $(window).height();
    		var elemTop = $(elem).offset().top;
    		var elemBottom = elemTop + $(elem).height();
    		return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
		}

		var downScroll = 0;
		var upScroll = 0;
		$(window).scroll(function() {
			var scrollTop = $(window).scrollTop();
			if(this.oldScroll < this.scrollY) {
				console.log("down");
				if (isScrolledIntoView(img)) {
					downScroll = downScroll + 1;
					var elemScroll = downScroll;
					// console.log("elemScroll1", elemScroll);
        			var imgPos = (elemScroll / 2) * 10 + 'px';
        			console.log("imgPos 1", imgPos);
        			img.css('transform', 'translateY(' + imgPos + ')');
        			img.css('margin-top', '-' + imgPos);

				}
			} 
			else {
				if (isScrolledIntoView(img)) {
					upScroll = upScroll + 1;
					var elemScroll = upScroll;
					console.log("upScroll", upScroll);
        			var imgPos = (elemScroll / 2) * 10;
        			console.log("upScroll", upScroll);
        				img.css('transform', 'translateY(-' + imgPos + 'px)');
        				var margin = img.css('margin-top');
        				console.log('margin', margin);
        				img.css('margin-top', '-' + upScroll - margin + 'px');
				}
			}		
        	this.oldScroll = this.scrollY;
    });

.article {
  max-width: 900px;
  margin: auto;
}
h1 {
  text-align: center;
}
.banner {
  position: relative;
  max-width: unset !important;
  margin-left: -20px !important;
  margin-right: -20px !important;
}
.banner .banner_container {
  background-color: #e7e6e4;
}
.banner .banner_container:before, .banner .banner_container:after {
  color: #fff;
  text-align: center;
  display: block;
  width: 100%;
  background-color: #000;
  text-transform: uppercase;
  font: 10px/10px Helvetica, Arial, sans-serif;
  padding: 5px 0px;
}
.banner .banner_container:before {
  content: 'Advertisement';
}
.banner .banner_container:after {
  content: 'Scroll to continue with content';
  position: absolute;
  bottom: 0;
}
.banner .banner_container .banner_content {
  padding-top: 20px;
  padding-bottom: 30px;
  position: relative;
}
.banner .banner_container .banner_content .banner_img_desktop {
  display: block;
}
.banner .banner_container .banner_content .banner_img_desktop figure {
  text-align: center;
  overflow: hidden;
}
.banner .banner_container .banner_content .banner_img_desktop figure img {
  height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="main">
  <h1>Header</h1>
  <div class="article one">
    l et enim. In ornare, massa a cursus cursus, nisl mi ornare mauris, nec porttitor risus erat ut odio. Integer malesuada hendrerit purus ullamcorper molestie. Fusce imperdiet orci vitae purus suscipit rutrum.Vivamus convallis erat in pharetra elementum. Phasellus metus neque, commodo vitae venenatis sed, pellentesque non purus. Pellentesque egestas convallis suscipit. Ut luctus, leo quis porta vulputate, purus purus pellentesque ex, id consequat mi nisl quis eros. Integer ornare libero quis risus fermentum consequat. Mauris pharetra odio sagittis, vulputate magna at, lobortis nulla. Proin eturpis dolor, tempor ut tellus et, sodales ultricies elit. Ut pharetra tristique est ac dictuutrum nulla porta dignissim. Fusce fermentum id nibh laoreet volutpat. Suspendisse venenatis, risus sed euismod finibus, risus arcu fringilla augue, nec vulputate felis nisl et enim. In ornare, massa a cursus cursus, nisl mi ornare mauris, nec porttitor risus erat ut odio. Integer malesuada hendrerit purus ullamcorper molestie. Fusce imperdiet orci vitae purus suscipit rutrum.
  </div>
<div class="banner">
	<div class="banner_container">
			<div class="banner_content">
			<div class="banner_img_desktop">
        <figure>
          <img src="http://www.ucodice.com/kinglinkr/front/img/banner.png" alt="">
        </figure>
			</div>
	</div>
</div>
</div>
  <div class="article two">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien velit, aliquet eget commodo nec, auctor a sapien. Nam eu neque vulputate diam rhoncus faucibus. Curabitur quis varius libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam placerat sem at mauris suscipit porta. Cras metus velit, elementum sed pellentesque a, pharetra eu eros. Etiam facilisis placerat euismod. Nam faucibus neque arcu, quis accumsan leo tincidunt varius. In vel diam enim. Sed id ultrices ligula. Maecenas at urna arcu. Sed quis nulla sapien. Nam felis mauris, tincidunt at ce purus suscipit rutrum.Vivamus convallis erat in pharetra elementum. Phasellus metus neque, commodo vitae venenatis sed, pellentesque non purus. Pellentesque egestas convallis suscipit. Ut luctus, leo quis porta vulputate, purus purus pellentesque ex, id consequat mi nisl quis eros. Integer ornare libero quis risus fermentum consequat. Mauris pharetra odio sagittis, vulputate magna at, lobortis nulla. Proin efficitur, nisi vel finibus elementum, orci sem volutpat eros, eget ultrices velit mi sagittis massa. Vestibulum sagittis ullamcorper cursus. Ut turpis dolor, tempor ut tellus et, soda sed euismod finibus, risus arcu fringilla augue, nec vulputate felis nisl et enim. In ornare, massa a cursus cursus, nisl mi ornare mauris, nec porttitor risus erat ut odio. Integer malesuada hendrerit purus ullamcorper molestie. Fusce imperdiet orci vitae purus suscipit rutrum.
  </div>
</div>

Answer 1

Here are some changes that demonstrate how to proceed. It's certainly far from complete, but the structure is there for you to fiddle with.

The key change was to fix the isScrolledIntoView() test:

return (elemTop >= docViewBottom);

But you also want to stop opening the ad window when it is fully opened (var openup), and reset the vars if the user scrolls past the ad window, etc.

Another puzzle (I haven't solved yet) is that your isScrolled... func should keep track of more than just whether the page has scrolled past the trigger point. It should also keep track of whether the page has passed the bottom of the ad, and the same two questions in reverse if scrolling up. Perhaps this func can also be used to reset the display the ad variables and div height...

var img = $('.banner_img_desktop').find('img');
var ban = $('.banner');
var imgPos=0, multiplier=20, maxheight=300, openup=true;
var lastScroll=0, downScroll=0, upScroll=0, direction='down';
var bodyHeight = $('body').height(), extraOffset=50;

function isScrolledIntoView(elem, direction) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
$('#msg1').html(docViewBottom +'/'+ elemTop);
$('#msg2').html(elemBottom+' // '+docViewTop);
    if (direction == 'down'){
        if (docViewBottom > bodyHeight){
        //$('#msg2').css('background','red');
           //If return to docTop, reset vars
           imgPos=0;
           openup=true;
           downScroll=0;
           $('.banner').css('height', '40px');
           return false;
        }else{
           return (docViewBottom >= elemTop+extraOffset);
        }
    }else{
        if (docViewTop < 50){
        //$('#msg2').css('background','red');
           //If return to docTop, reset vars
           imgPos=0;
           openup=true;
           downScroll=0;
           $('.banner').css('height', '40px');
        }
        return (elemTop <= docViewBottom);
    }
}

$(window).scroll(function() {
    var scrollTop = $(window).scrollTop();
$('#msg2').html(scrollTop+' // '+lastScroll+' // '+direction);
    if(scrollTop > lastScroll) {
        direction = 'down';
        if (isScrolledIntoView(img, direction)) {
           downScroll += 1;
           if (openup && imgPos <= 300){ //300 is img max height
              imgPos = (downScroll / 2) * multiplier;
              if (imgPos > 300) openup = false;
           }else{
              if (imgPos > 40) imgPos = imgPos - 15;
           }
//$('#msg2').html(imgPos+' // '+downScrol+' // '+direction);
//$('#msg1').html($('#msg1').html() + '[300]');
           $('.banner').css('height', imgPos + 'px');
        }

    } else {

        direction = 'up';
        if (isScrolledIntoView(img, 'up')) {
           last_direction = 'up';
           upScroll += 1;
           if (openup && imgPos <= 300){
              imgPos = (upScroll / 2) * multiplier;
              if (imgPos > 300) openup = false;
           }else{
              imgPos = imgPos - upScroll;
           }
           $('.banner').css('height', imgPos + 'px');
        }
    }
    lastScroll = scrollTop;
});

#msg1{position:fixed;top:0; left:0;padding:5px;font-size:1.2rem;background:lavender;border:1px solid blue;z-index:999999;}
#msg2{position:fixed;top:0;right:0;padding:5px;font-size:1.2rem;background:wheat; border:1px solid orange;z-index:999999;}

.article{max-width:900px;margin:auto;}
h1{text-align:center;}

.banner{position:relative;height:40px;max-width:unset !important;margin:0 -20px;overflow:hidden;}

.banner .banner_container{background-color:#e7e6e4;}
.banner .banner_container:before, .banner .banner_container:after{color:#fff;text-align:center;display:block;width:100%;background-color:#000;text-transform:uppercase;font:10px/10px Helvetica, Arial, sans-serif;padding:5px 0px;}
.banner .banner_container:before{content:'Advertisement';}
.banner .banner_container:after{content:'Scroll to continue with content';position:absolute;bottom:0;}
.banner .banner_container .banner_content{padding-top:20px;padding-bottom:30px;position:relative;}
.banner .banner_container .banner_content .banner_img_desktop{display:block;}
.banner .banner_container .banner_content .banner_img_desktop figure{text-align:center;overflow:hidden;}
.banner .banner_container .banner_content .banner_img_desktop figure img{height:300px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="msg1"></div>
<div id="msg2"></div>
<div class="main">
  <h1>Scroll Very Slowly</h1>
  <div class="article one">
    l et enim. In ornare, massa a cursus cursus, nisl mi ornare mauris, nec porttitor risus erat ut odio. Integer malesuada hendrerit purus ullamcorper molestie. Fusce imperdiet orci vitae purus suscipit rutrum.Vivamus convallis erat in pharetra elementum. Phasellus metus neque, commodo vitae venenatis sed, pellentesque non purus. Pellentesque egestas convallis suscipit. Ut luctus, leo quis porta vulputate, purus purus pellentesque ex, id consequat mi nisl quis eros. Integer ornare libero quis risus fermentum consequat. Mauris pharetra odio sagittis, vulputate magna at, lobortis nulla. Proin eturpis dolor, tempor ut tellus et, sodales ultricies elit. Ut pharetra tristique est ac dictuutrum nulla porta dignissim. Fusce fermentum id nibh laoreet volutpat. Suspendisse venenatis, risus sed euismod finibus, risus arcu fringilla augue, nec vulputate felis nisl et enim. In ornare, massa a cursus cursus, nisl mi ornare mauris, nec porttitor risus erat ut odio. Integer malesuada hendrerit purus ullamcorper molestie. Fusce imperdiet orci vitae purus suscipit rutrum.
    l et enim. In ornare, massa a cursus cursus, nisl mi ornare mauris, nec porttitor risus erat ut odio. Integer malesuada hendrerit purus ullamcorper molestie. Fusce imperdiet orci vitae purus suscipit rutrum.Vivamus convallis erat in pharetra elementum. Phasellus metus neque, commodo vitae venenatis sed, pellentesque non purus. Pellentesque egestas convallis suscipit. Ut luctus, leo quis porta vulputate, purus purus pellentesque ex, id consequat mi nisl quis eros. Integer ornare libero quis risus fermentum consequat. Mauris pharetra odio sagittis, vulputate magna at, lobortis nulla. Proin eturpis dolor, tempor ut tellus et, sodales ultricies elit. Ut pharetra tristique est ac dictuutrum nulla porta dignissim. Fusce fermentum id nibh laoreet volutpat. Suspendisse venenatis, risus sed euismod finibus, risus arcu fringilla augue, nec vulputate felis nisl et enim. In ornare, massa a cursus cursus, nisl mi ornare mauris, nec porttitor risus erat ut odio. Integer malesuada hendrerit purus ullamcorper molestie. Fusce imperdiet orci vitae purus suscipit rutrum.
  </div>
<div class="banner">
  <div class="banner_container">
     <div class="banner_content">
        <div class="banner_img_desktop">
           <figure>
              <img src="http://www.ucodice.com/kinglinkr/front/img/banner.png" alt="">
           </figure>
        </div>
     </div>
  </div>
</div>
  <div class="article two">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien velit, aliquet eget commodo nec, auctor a sapien. Nam eu neque vulputate diam rhoncus faucibus. Curabitur quis varius libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam placerat sem at mauris suscipit porta. Cras metus velit, elementum sed pellentesque a, pharetra eu eros. Etiam facilisis placerat euismod. Nam faucibus neque arcu, quis accumsan leo tincidunt varius. In vel diam enim. Sed id ultrices ligula. Maecenas at urna arcu. Sed quis nulla sapien. Nam felis mauris, tincidunt at ce purus suscipit rutrum.Vivamus convallis erat in pharetra elementum. Phasellus metus neque, commodo vitae venenatis sed, pellentesque non purus. Pellentesque egestas convallis suscipit. Ut luctus, leo quis porta vulputate, purus purus pellentesque ex, id consequat mi nisl quis eros. Integer ornare libero quis risus fermentum consequat. Mauris pharetra odio sagittis, vulputate magna at, lobortis nulla. Proin efficitur, nisi vel finibus elementum, orci sem volutpat eros, eget ultrices velit mi sagittis massa. Vestibulum sagittis ullamcorper cursus. Ut turpis dolor, tempor ut tellus et, soda sed euismod finibus, risus arcu fringilla augue, nec vulputate felis nisl et enim. In ornare, massa a cursus cursus, nisl mi ornare mauris, nec porttitor risus erat ut odio. Integer malesuada hendrerit purus ullamcorper molestie. Fusce imperdiet orci vitae purus suscipit rutrum.
    l et enim. In ornare, massa a cursus cursus, nisl mi ornare mauris, nec porttitor risus erat ut odio. Integer malesuada hendrerit purus ullamcorper molestie. Fusce imperdiet orci vitae purus suscipit rutrum.Vivamus convallis erat in pharetra elementum. Phasellus metus neque, commodo vitae venenatis sed, pellentesque non purus. Pellentesque egestas convallis suscipit. Ut luctus, leo quis porta vulputate, purus purus pellentesque ex, id consequat mi nisl quis eros. Integer ornare libero quis risus fermentum consequat. Mauris pharetra odio sagittis, vulputate magna at, lobortis nulla. Proin eturpis dolor, tempor ut tellus et, sodales ultricies elit. Ut pharetra tristique est ac dictuutrum nulla porta dignissim. Fusce fermentum id nibh laoreet volutpat. Suspendisse venenatis, risus sed euismod finibus, risus arcu fringilla augue, nec vulputate felis nisl et enim. In ornare, massa a cursus cursus, nisl mi ornare mauris, nec porttitor risus erat ut odio. Integer malesuada hendrerit purus ullamcorper molestie. Fusce imperdiet orci vitae purus suscipit rutrum.
  </div>
</div><!-- .main -->