0

Chris Coyier の Sticky Footer の例を使用して、Web ページにフッターを追加しています。それはうまくいきます！

ただし、フッターがWebページではなく画面の下部に配置されるようにコードを調整する方法を考えています。

たとえば、最初に読み込まれると、画面のフッターに残りますが、下にスクロールし始めると、それ自体が調整され、ページの下部に固定されます。

画面の下部に表示するにはどうすればよいですか?

eample の最後の 2 行を微調整してみました。

 $(window)
               .scroll(positionFooter)
               .resize(positionFooter)

でも、行き過ぎない…

4

2 に答える 2

1

これがうまくいくことを願っていますhttp://jsfiddle.net/8YWHn/

CSS

.fixed {
  position:fixed;
    bottom:0px;
    -webkit-backface-visibility:hidden;  

}

js

 var footerHeight = 0,
               footerTop = 0,
               $footer = $("footer");

           positionFooter();

           function positionFooter() {

                    footerHeight = $footer.height();
                    footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";

                   if ( ($(document.body).height()+footerHeight) < $(window).height()) {
                       $footer.css({
                            position: "absolute"
                       }).animate({
                            top: footerTop
                       })
                   } else {
                       $footer.addClass('fixed');
                   }

           }

           $(window)
                   .scroll(positionFooter)
                   .resize(positionFooter)
于 2013-10-11T04:30:40.490 に答える
0

私にとってうまくいくこれを行う別の方法は、単純にjavascriptの行を置き換えることです:

 position: "static"

と：

 position: "fixed"
于 2013-10-11T04:49:33.307 に答える