`Fiddle`

Question

我的网页底部有一个固定栏。在该栏中，有几个按钮，包含网站上常用的页面。我有一个位于页面底部的页脚。我想要做的是，当您向下滚动页面时，当您到达主要内容的底部时，我希望固定栏向上滚动并在其下方显示页脚。实现这一目标的最佳方法是什么？以下是一个例子。红色代表整个页面。蓝色代表页面的可见部分。黄色是固定条。灰色是页脚。滚动到页面上主要内容的末尾后，黄色固定栏将向上滚动，页脚将显示在下方。我的页面设置如下：

<div id="red">
    <div id="blue"></div>
    <div id="yellow"></div>
    <footer></footer>
</div>

Answer 1

以下解决方案使用Jquery：

将.scroll()绑定到$(document)元素＆amp;检查OnScroll ScrollTop是否到达window 此top元素的footer元素的结尾位于animate元素的fixed_element。

然后foot您的<html> <head> <title>Demo</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> /* Code to Handle Scroll */ $(document).ready(function(){ var hgh=$(".foot").height(); $(document).scroll(function(){ // Check Whether End Point is reached or not. if($(window).scrollTop() >= $('.foot').offset().top + $('.foot').height() - window.innerHeight) { $(".fixed_bar").animate({ "position":"fixed", "bottom":""+hgh+"", "right":"0px" },100); // I'll Suggest to Use .fadeOut("100"); Here } else { $(".fixed_bar").animate({ "position":"fixed", "bottom":"0px", "right":"0px" },100); // I'll Suggest to Use .fadeIn("100"); Here } }); }); </script> <style type="text/css"> .fixed_bar{ position:fixed; bottom:0px; right:0px; width:100%; height:25px; display:block; background:#a77; text-align:center; color:#ddeeff; } body{ margin:0px; width:100%; height:100%; } .foot{ width:100%; height:25px; display:block; background:#c33; color:yellow; text-align:center; } </style> </head> <body> <center><h2> o<br /><hr /> t<br /><hr /> h<br /><hr /> e<br /><hr /> r<br /><hr /> <br /><hr /> c<br /><hr /> o<br /><hr /> n<br /><hr /> t<br /><hr /> e<br /><hr /> n<br /><hr /> t<br /><hr /> <br /><hr /></h2></center> <div class="foot">Footer</div> <div class="fixed_bar">Bar Hiding The Footer</div> </body> </html>以显示隐藏的{{1}}元素。

所以这是我的代码：

{{1}}

以及这是工作

`Fiddle`

同样如此。

希望它会帮助你。干杯:)。

将CSS页脚固定为浮动/ Jquery

1 个答案:

`Fiddle`