Question

我不知道我是否足够具体，

但是我创建了一个灯箱式的fadein背景，但在我看来，背景不会到达页面的最底部。因此，当我滚动时，白色背景再次出现。

HTML

<body>
<div id="overlay"></div>   

<a  style="position:absolute;" href="#" class="btn btn-default" data-toggle="active">    
Button </a>
<div class="ex-height"></div>

CSS

#overlay {
position:absolute;
width: 100%;
height : 100%;
background: #000;
top: 0;
left: 0;

opacity:0;
transition: opacity .3s;
-moz-transition: opacity .3s;
-webkit-transition: opacity .3s;
}


.backdrop {
opacity: 0.4 !important;
}

.ex-height {
height: 1204px;
}

Jquery的

$(function() {

function toggle() {
   $('#overlay').toggleClass('backdrop');
   }

 $('[data-toggle="active"]').click(toggle);

 });

感谢任何有用的建议！

Answer 1

将叠加层的高度设置为文档的高度：

$('#overlay').toggleClass('backdrop').height($(document).height());

Answer 2

将#overlay更改为

#overlay {
position:absolute;
background: #000;
top: 0;
left: 0;
bottom: 0;
right: 0;

opacity:0;
transition: opacity .3s;
-moz-transition: opacity .3s;
-webkit-transition: opacity .3s;
}

如果这不起作用 - 请尝试将底部和右侧值更改为100％

Answer 3

demo

$(function() {

  function toggle() {
    var pageHeight = $('html, body').innerHeight();
    $('#overlay').toggleClass('backdrop').height( pageHeight  ); 
  }

  $('[data-toggle="active"]').click(toggle);

});

在Jquery中获取页面最大高度

3 个答案: