Question

我真的无法弄清楚我怎么能做到这一点。我需要在底部始终显示一个部分可见的页脚。当您悬停时，它会显示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>

Answer 1

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

将此JS添加到'$（window）.scroll（function（）{}'

中

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

页脚悬停和滚动问题

1 个答案: