1

これは私がやろうとしていることです:

画面サイズに関係なく、ユーザーの画面の下部にくっつくフッターを作成したい。しかし、ユーザーがスクロールすると、ユーザーが下にスクロールしたときに、ページの一部としてヘッダーを固定から下に変更できるようにしたいと考えています。私はJSを初めて使用しますが、次のようないくつかのことを試しました:

 $(document).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function (e) {

                var theEvent = e.originalEvent.wheelDelta || e.originalEvent.detail * -1;
                if (theEvent / 120 > 0) {
                    if ($(window).scrollTop() == 0) {
                        $("#content_under_fixed_footer").hide();
                    }
                }
                else {
                    if ($(window).scrollTop() < $(document).height() - $(window).height()) {
                        $("#content_under_fixed_footer").fadeIn(2000);
                        $(".fixed_header").css("position", "relative");
                    }
                }
            });

上記のスクリプトを使用すると、トリガーが正しくありません。ユーザーの画面が大きい場合はスクロールしませんが、ウィンドウを短くすると比較的うまく機能します。今日これを提出する必要があるので、助けてください。解決策を試してみます。ありがとう！

4

4 に答える 4

1

これを見てください：

<html><head><title>Test</title> 
<script type="text/javascript">
alert(screen.width + "x" + screen.height);
</script>
</head><body>
</body>
</html>

このようにして、screen.width と screen.height を直接使用し、それに基づいてすべてを計算できます。

于 2013-07-10T14:14:08.737 に答える
1

このようなことを意味しますか？( jsFiddle )

HTML

<div id="content"></div>
<div id="wrapper">
    <footer>Something</footer>
</div>

CSS

body
{
    margin: 0;
}

#content
{
    position: absolute;
    height: 1000px;
    background-color: red;
    width: 300px;
}

#wrapper
{
    position: absolute;
    height: 100%;
}

footer
{
    position: absolute;
    bottom: 0px;
    width: 300px;
    text-align: center;
    background-color: darkred;
}
于 2013-07-10T16:46:20.337 に答える
1

HTML:

<div class='footer'>
footer
</div>

スタイル：

.footer {
    position: fixed;
    bottom: 0;
}

Jクエリ:

$(window).scroll(function(){
if($(window).scrollTop('0'){
} else {
   $('.footer').css('position', 'relative');
}
});

これはうまくいくはずです

于 2013-07-10T14:27:33.770 に答える