判断滚动到指定的div位置相关内容是否显示

1.html

<div class="showCont_comment">
	<div class="up_down_pageBox">
	页面指定的div
	</div>
</div>
<div class="comment_lable_box floatInfoBox">需要展示的内容</div>

2.样式

.floatInfoBox{
    position: fixed;
    bottom: 0;
    width: 912px;
    height: 64px;
    background:rgba(255,255,255,1);
    box-shadow:0px -4px 5px 0px rgba(0,0,0,0.08);
    border-radius:8px 8px 0 0;
    margin-bottom: 0;
    z-index: 100;
    padding: 17px 64px 0;
    opacity: 0;
    //line-height: 50px;
    .show_contSytle{
      font-size: 14px;
    }
    .floatBottomBoxStyle{
      //margin-left: 9px;
    }
  }
  .toShowComment{
    transition: transform 500ms ease 0s;
    transform: translateY(0px);
  }
  .toHideComment{
    transition: transform 500ms ease 0s;
    transform: translateY(70px);
  }

3.代码

mounted () {
    let self =this
     setTimeout(function () {
      self.divHeight()
    },2000)
    setTimeout(function () {
      $(window).scroll(function () {
        var divScroll = $('.up_down_pageBox').offset().top - $(document).scrollTop() - $(window).height(); //获取div距离顶部的距离  —  滚动的距离  —  浏览器的高度
        var divSize = $('.up_down_pageBox').height() + $(window).height(); //获取div高度  +  浏览器高度
         // 该div不在屏幕显示范围内
        if(divScroll > 0 || divScroll < -divSize){
          // self.commentFlag = false
          $('.floatInfoBox').addClass('toShowComment')
          $('.floatInfoBox').removeClass('toHideComment'）
        } else {
          // self.commentFlag = true
          $('.floatInfoBox').removeClass('toShowComment')
          $('.floatInfoBox').addClass('toHideComment')
        }
      })
    },1000)
     //  if(divScroll > 0){}--这个是判断在滚动到指定div前需要显示的方式
  },
  methods: {
  //div到顶部的距离
	    divHeight () {
	      var divTopHeight = $('#articleContentPanel').outerHeight()
	      if (divTopHeight > 520) {
	        $('.floatInfoBox').css('opacity', 1)
	      } else {
	        $('.floatInfoBox').css('opacity', 0)
	      }
	    },
    }