隐藏页脚上滚动

逐渐显现，我努力让自己在一个项目隐藏页脚上滚动

喜欢这个页面页脚是隐藏的这种效果，并显示为您滚动。页面被包装在一个页面内容元素中，页脚被固定到底部z索引0 当你到达窗口的末尾页面时，会发生什么事情？当你滚动页面时，内容页边距就会增加。我真的无法找到一种方法来处理它与j查询

2017-04-02 Animal Kingdom

这里是一个例子，你只是将其放置在页面的底部或任何其他你希望它留下的地方，以隐藏它，你可以使用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/

来源

2017-04-04 09:36:36

我做了一个例子给你。

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

 
$(window).resize(calcFooter); 
 
    
 
});

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; 
 
}

<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>

来源

2017-09-28 00:01:08 stojkosd

比方说，它出现在底部这个元素是页脚标签。在这种情况下，它会是这样的： 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'); 
     } 
    } 
});

来源

2017-09-28 00:06:36 Genjik

隐藏页脚上滚动

回答

相关问题