Question

我试图在项目中产生这种效果

就像这个页面一样，页脚被隐藏并在滚动时出现。页面包含在页面内容元素中，页脚固定到底部的z-indexed 0 当你滚动到达窗口的末尾时，页面内容边距会上升。我无法真正找到一种方法来使用j查询

Answer 1

以下是一个示例，您只需将其放置在页面底部或您希望其保留的任何其他位置，隐藏它即可使用z-index = -1;

//<br><br><br><br><br><br><br><br><br>
<h2><code>fixed</code></h2>
<div class="fixed"><div class="expand"></div></div>

<br><br><br><br><br><br><br><br>

CSS

@import "compass/css3";

h2 {
  text-align: center;
  margin-top: 48px;
}

div {
  height: 200px;
  width: 50%;
  max-width: 600px;
  margin: 32px auto;
  overflow-x: hidden;
 // overflow-y: scroll;
}

.fixed {
  background: url('http://lorempixel.com/600/200/animals');
  background-attachment: fixed;
  overflow: hidden;
}

.expand {
  height: 400px;
  width: 100%;
}

https://jsfiddle.net/cu01m218/

Answer 2

我为你做了一个例子。

＆＃13;

$(function(){
  
  calcFooter();
  
function calcFooter () {
  var footer = $('.footer').height();
  var mainContent = $('.main-content');
  
  mainContent.css('margin-bottom', footer);
}

$(window).resize(calcFooter);
  
});

＆＃13;

body {
  margin: 0;
}

.main-content {
  position: relative;
  z-index: 100;
  height: 100vh;
  background-color: grey;  
 }
 
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;

  height: 200px;
  width: 100%;
  background-color: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
<div class="wrapper">
  
  <div class="main-content" style="margin-bottom: 200px;">
    <h1>This is main content.</h1>
    <p>Scroll down to reveal footer!</p>
  </div>
  
  <div class="footer">
    <p>This footer.</p>
  </div>
  
</div>

＆＃13;

Answer 3

让我们说这个出现在底部的元素是页脚标记。在这种情况下，它将是这样的： HTML：

<footer></footer>

在你的css中：

footer {
    position: fixed;
    bottom: 0;
    display: none;
}

然后你必须添加一个会显示页脚的类

.active {

display: block;

}

你的jquery将是这样的：

$(window).on('scroll', function () {
    if ($(this).scrollTop() > 50) {
        if (!$(footer).hasClass('active')) {
            $(footer).addClass('active');
        }
    } else {
        if ($(footer).hasClass('active')) {
            $(footer).removeClass('active');
        }
    }
});

滚动隐藏页脚逐渐显示

3 个答案: