Question

我有一个div有两个CTA按钮。我要在达到90％的页面或到达我的#footer div后隐藏这个div。我这样做的原因是为了防止它干扰页脚。

我找到了一些代码但是它会在800px滚动之后隐藏div而不是基于百分比。

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});

body {
  height: 1600px;
}

.bottomMenu {
  display: none;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  border-top: 1px solid #000;
  background: red;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bottomMenu"></div>

有什么想法吗？

Answer 1

您只需进行一些计算即可获得所需的百分比：

＆＃13;

var limit = parseInt(($(document).height() * 70) / 100); 
/* here I took 70% of the height of the page*/

console.log(limit);

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y < limit) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});

＆＃13;

body {
  height: 1600px;
}

.bottomMenu {
  display: none;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  border-top: 1px solid #000;
  background: red;
  z-index: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bottomMenu"></div>

＆＃13;

Answer 2

这里我已将其转换为百分比。更新PER值以更新配置。

＆＃13;

//PER is Percentage value
var PER = 90;
var yInPixel, totalHeight;

//If page if with dynamic height change totalHeight and yInPixel after Resize Event
$(document).ready(function() {
  totalHeight = $(this).height();
  yInPixel = totalHeight * (PER / 100) - window.innerHeight;
});

$(document).scroll(function() {
  var y = $(this).scrollTop();

  if (y > yInPixel) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});

＆＃13;

body {
  height: 1600px;
}

.bottomMenu {
  display: none;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  border-top: 1px solid #000;
  background: red;
  z-index: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bottomMenu"></div>

＆＃13;

Answer 3

在达到页面的90％后隐藏此div：

您需要使用Math.round($(document).height() * 90 / 100)

获得90％

＆＃13;

var height = Math.round($(document).height() * 90 / 100);

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > height) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});

＆＃13;

body {
  height: 1600px;
}

.bottomMenu {
  display: none;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  border-top: 1px solid #000;
  background: red;
  z-index: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bottomMenu"></div>

＆＃13;

或者到达我的#footer div

您需要使用offset().top从窗口获取元素偏移量：

＆＃13;

var height = Math.round($('#footer').offset().top);

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > height) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});

＆＃13;

body {
  height: 1600px;
}

.bottomMenu {
  display: none;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  border-top: 1px solid #000;
  background: red;
  z-index: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bottomMenu"></div>
<div style="height:1000px;"></div>
<div id="footer"></div>

＆＃13;

在滚动一定百分比后隐藏div

3 个答案: