页脚悬停和滚动问题

时间:2013-12-03 15:45:17

标签: javascript jquery html css css3

我真的无法弄清楚我怎么能做到这一点。我需要在底部始终显示一个部分可见的页脚。当您悬停时,它会显示400px的整个高度,然后返回原始位置。 我的问题是滚动功能。我不知道如何正确设置它。我要找的结果是当你一直向下滚动(没有悬停)时,页脚需要占据整个高度,如果向上滚动则页脚会回到原始位置。

这是jsFiddle(我希望它有效,这是我第一次使用它)。

以下是代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">

    $(window).scroll(function () {

        if ($(window).scrollTop() > $('#move').position() -500) {
            $('#footer').css('bottom', 0);
        }
        else {
            $('#footer').css('bottom', -300);
        }
    });

    $(document).ready(function () {

        $('#footer').bind('mouseenter', function () {

            $(this).stop().animate({ bottom: 0 }, 400); // on hover  0 400  

        }).bind('mouseleave', function () {

            $(this).stop().animate({ bottom: -300 }, 400); // on out -300  400

        });
    });

             </script>
<style>
    html, body{

    }
    #footer {
        position: fixed;
        z-index: 999;
        bottom: -300px;
        width: 100%;
        height: 400px;
        background-color: #999;
        opacity:0.5;

    }
    #content {
        padding-bottom: 100px;

    }

    #move {
        height:auto;
        top: 5000px;
        position: relative;
        background-color:red;
    }
</style>

</head>

<body>

<div id="content">

<h1 id="move"> end content </h1>

</div>

<div id="footer">

this is the footer

</div>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

更新了小提琴:http://jsfiddle.net/moonspace/ZCger/1/

将此JS添加到'$(window).scroll(function(){}'

if( $(window).scrollTop() + $(window).height() == $(document).height() ) {
        $('#footer').css('bottom', 0);
    }