动态滚动打开和关闭div

时间：2019-05-31 11:14:48

标签： javascript jquery html

我要实现的目标是，div向下滚动时慢慢关闭，然后向上滚动则慢慢打开并扩展！我已经实现了第一部分，但是我正在努力学习第二部分，那就是当我向上滚动时div没有关闭！请看看这个Codepen，以全面了解！

以下是我的摘要！ 

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>

1 个答案:

答案 0 :(得分：0)

这里有一些更改说明了如何进行。当然，它还远未达到完美，但其中的结构供您摆弄。

关键更改是修复了isScrolledIntoView()测试：

return (elemTop >= docViewBottom);

但是您还希望在完全打开（var openup）时停止打开广告窗口，并在用户滚动到广告窗口等上方时重置变量。

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

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);
    if (direction == 'down'){
        //if (docViewBottom < elemTop) imgPos=0; //reset
        return (docViewBottom >= elemTop);
    }else{
        if (docViewTop < 50 || docViewBottom > bodyHeight){
           //If return to docTop, reset vars
           imgPos=0;
           openup=true;
        }
        return (elemTop >= docViewBottom);
    }
}

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop();
  if(this.oldScroll < this.scrollY) {
    last_direction = 'down'
    if (isScrolledIntoView(img, 'down')) {
      downScroll += 1;
      if (openup && imgPos <= 300){
          imgPos = (downScroll / 2) * multiplier;
          if (imgPos > 300) openup = false;
      }else{
          if (imgPos > 40)
            imgPos = imgPos - 15;
      }
$('#msg2').html(imgPos+' // '+downScroll);
$('#msg1').html($('#msg1').html() + '[300]');
      $('.banner').css('height', imgPos + 'px');
    }
  } else {
    if (isScrolledIntoView(img, 'up')) {
      last_direction = 'up';
      upScroll += 1;
      if (openup){
          imgPos = (upScroll / 2) * multiplier;
          if (imgPos > 300) openup = false;
      }else{
          imgPos = imgPos - upScroll;
      }
      $('.banner').css('height', imgPos + 'px');
    }
    this.oldScroll = this.scrollY;
  }
});
#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 -->

相关问题
最新问题