2

ここにジェームズ！スティッキーフッターを取得するために約2時間試しましたが、CSSを台無しにし続けているようです。jQueryが処理できるスクリプトを探しています。ほとんどのスクリプトがどのように機能するかは理解していますが（学習しているだけなので驚くべきことです）、フッターの高さに関係なくスクリプトが機能する必要があります。これは、動的な高さが設定されていないためです。私のページのCSSファイル。スティッキーフッターの作業スクリプトを誰かが提供できるでしょうか？フッター自体を常にページの下部に配置したいのですが、位置は固定されていません。コンテンツ要素は#postsであり、フッター領域はIDが#bottomの要素です。ページの例を次に示します。JTBパーマリンクページ

4

6 に答える 6

3

Ok。HTML：

<div id="container">
    <div id="wrapper">
        <!-- CONTENT GOES HERE -->
    </div>
    <div id="footer">
        <!-- FOOTER GOES HERE -->
    </div>
</div>

CSS：

#container {
    min-height: 100%;
    position: relative;
    width: 100%;
}
#wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 206px; /* footer height, we will fix that with jquery */
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0px;
    height: 206px; /* footer height if any */
}

jQuery：

$(document).ready(function(){
    var footer_height=$("#footer").height();
    $("#wrapper").css({
        'padding-bottom' : footer_height
    });
});

警告する必要があります。jquery.height（）関数は正しく機能しない可能性があるため、パディングとマージンに注意してください（マージン/パディング値を「footer_height」に追加するだけで問題ありません）。

于 2012-03-26T20:01:18.767 に答える
3

これはここに置いておきます

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Sticky footer</title>
    <!-- include jQuery -->
    <script src="jquery-2.1.0.min.js"></script>
    <!-- include our scripts -->
    <script type="text/javascript">
      $(function () {
        // sticky footer
        (function () {
          var
            $window = $(window),
            $body   = $(document.body),
            $footer = $("#footer"),
            condition = false,
            resizing  = false,
            interval  = 500
            ;

          function positionFooter() {
            if (resizing) {
              setTimeout(function(){
                if(resizing == false) {
                  positionFooter();
                }
              }, interval);
              return true;
            }
            var
              footer_position = $footer.css('position'),
              body_height   = $body.height(),
              window_height = $window.height(),
              footer_height = $footer.outerHeight();

            if (footer_position == 'absolute') {
              condition = body_height + footer_height < window_height
            }
            else {
              condition = body_height < window_height
            }

            if (condition) {
              $footer.css('position', 'absolute').css('bottom', 0);
            }
            else {
              $footer.css('position', 'relative');
            }

            resizing = setTimeout(function () {
              resizing = false;
            }, interval);

            return true;
          }

          $window.bind("load", function () {
            positionFooter()
          });

          $window.resize(positionFooter);

        }());
      });
    </script>

    <style>
      body {
        text-align: center;
      }

      #header {
        width: 100%;
        background-color: green;
        color: white;
        height: 100px;
      }

      #footer {
        width: 100%;
        background-color: blue;
        color: white;
      }
    </style>
  </head>

  <body>
    <header id='header'>
      Header content
    </header>
    <div id='content'>
      Content is here!
    </div>
    <footer id='footer'>
      Sticky footer content
    </footer>
  </body>
</html>
于 2014-06-01T11:30:11.970 に答える
1

JQuery

function getWndowSize()
{
    var windows_height=$(windows).height();
    var current_height=windows_height-100;/*change values of 100 how much u need based on your requirement*/
    $("#wrapper").css({'min-Height' : current_height});
}

コード：

<body onload="getWndowSize()">

<div id="container">
    <div id="wrapper">
        <!-- CONTENT GOES HERE -->
    </div>
    <div id="footer">
        <!-- FOOTER GOES HERE -->
    </div>
</div>

私のページでは正常に機能しているので、試してみてください。

于 2015-05-04T12:51:28.570 に答える
0

スティッキーフッターのあるページを作成しました...

これにより、それぞれ55ピクセルのヘッダーとフッターを含むページが作成され、フッターはブラウザーウィンドウの一番下に固定されます。

これが私がやったことです：

HTML：

<!--main header container-->
<div id="header" class="ui-frame ui-frame-header"></div>

<!--main container for app-->
<div id="content" class="ui-mainContent">
    This is a place holder for my content
</div>

<!--//main footer container-->
<div id="footer" class="ui-frame ui-frame-footer"></div>

CSS：

.ui-frame {
    width: 100%;
    height: 55px;
    background: #000000;
    font-family: Segoe UI, Arial, sans-serif;
    color: #ffffff;
    text-align: right;
    vertical-align: middle;
    font-size: 16px;
}

.ui-frame-header {
   position: absolute;
   top: 0;
}

.ui-mainContent {
    position: absolute;
    top: 55px;
    bottom: 55px;
    background: #ffffff;
    font-family: Segoe UI, Arial, sans-serif;
}

.ui-frame-footer {
    position: absolute;
    bottom: 0
}
于 2012-03-26T20:01:56.003 に答える
0

私があなたを正しく理解していれば、jQueryは必要ありません。簡潔でシンプル...

http://www.cssstickyfooter.com/

于 2012-03-26T20:07:32.960 に答える
0

この質問に答えるには遅すぎることはわかっていますが、私にとっても大変でした。この素晴らしい場所で何かを見つけていたので、この質問に答えました。1つのコードを共有したいと思います。

以下のデモで見つけることができます。

私はいつもここで他の人から助けを得ているので、これが誰かを助けることができることを願っています。

Stackoverflowに感謝します。

$(document).ready(function(){
$(window).on("scroll", function() {
		var footer_height = $( "#footer" ).outerHeight();
		var dim_height = $(".dim").outerHeight();
		var scrollHeight = $(document).height();
		var scrollPosition = $(window).height() + $(window).scrollTop();
		if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
			// when scroll to bottom of the page
			$(".dim").removeClass("dim-fixed");
			$(".dim").addClass("dim-static").css({
			'bottom': footer_height,
			});

		}else{
			$(".dim").removeClass("dim-static");
			$(".dim").addClass("dim-fixed").css({'bottom': 0,});
		}
});

}); //Document Ready function end
body {
    margin: 0px auto;
    background: #ffffff;
    font-size: 14px;
    color: #444444;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}
.point1 {
    width: 100%;
    margin: 0 auto;
}
.clearfix:before, .clearfix:after {
    display: table;
    content: " ";    
    }
#footer {
    z-index: 104;
    display: block;
}

footer.page-footer {
    width: 100%;
    background: #333333;
    color: #fff;
    border-top: 2px white solid;
    position: absolute;
    left: 0;
    }

footer.page-footer > div {
    padding: 30px 0 40px;
    min-height: 162px;
    margin: 0 auto;
    position: relative;
}
nav.footer-menu {
    position: relative;
    float: left;
    width: 75%;
    padding-right: 30px;
    display: block;
}

nav.footer-menu > ul {
    margin-top: -3px;
}
body:not([class*="static-page"]) ul, body:not([class*="static-page"]) li {
    list-style: none;
}
nav.footer-menu > ul > li {
    display: inline-block;
    width: 33.33%;
    margin: 0;
    padding: 0;
    border: 0;
}
nav.footer-menu a {
    text-decoration: none;
    color:#fefefe;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 1.071em;
    padding: 0 10px 8px;
    vertical-align: top;
    display: inline-block;
}

.footer-data {
    font-size: 0.929em;
    color: #a0a0a0;
    overflow: hidden;
}

/* footer extra menu container*/
.dim-static  {
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	background: #ddd; */
	left: 0;
	right: 0;
	width: 100%;
	text-align: center;}
  
  .dim-fixed {
	position: fixed;
	margin-left: auto;
	margin-right: auto;
	background: #ddd; */
	left: 0;
	right: 0;
	width: 100%;
	text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<section>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>

</section>
<div class="dim"> Full width Footer menu </div>
<footer class="page-footer" id="footer">
  <div class="point1 clearfix">
    <nav class="footer-menu">
      <ul>
        <li><a class="active" title="stackoverflow.com" href="#">Home</a></li>
        <li><a rel="nofollow" title="Add a New Listing" href="#add-listing.html">Add a Listing</a></li>
        <li><a title="Search for property" href="#search.html">Search</a></li>
        <li><a rel="nofollow" title="About Us" href="#about-us.html">About Us</a></li>
        <li><a title="Contact us" href="#contact-us.html">Contact Us</a></li>
        <li><a title="My Favorites List" href="#my-favorites.html">Favorites</a></li>
        <li><a title="Terms of use" href="#terms-of-use.html">Terms of Use</a></li>
        <li><a title="Privacy Policy" href="#privacy-policy.html">Privacy Policy</a></li>
        <li><a title="FAQs" href="#faqs.html">FAQs</a></li><li><a title="Refund Policy" href="#refund-policy.html">Refund Policy</a></li>
      </ul>
    </nav>
    <div class="footer-data">
      <div class="icons">
        <a class="rss" title="Subscribe to RSS-feed" href="#" target="_blank"></a>
        <a class="facebook" target="_blank" title="Join us on Facebook" href="#"></a>
        <a class="twitter" target="_blank" title="Join us on Twitter" href="#"></a>
      </div>

      <div>
        © 2017, powered by <a title="stackoverflow.com" href="http://stackoverflow.com/">stackoverflow.com</a>
      </div>
    </div>
  </div>
</footer>
</body>

ここでも、jsfiddle

どちらのデモでも、追加のフッターメニューはフッターの上にのみ固定され、自動動的高さで表示されます。何らかの理由で、ブースデモでは表示されませんが、ログを確認すると、私が話している内容とその100がわかります。 ％私のウェブサイトで正常に動作しています。

これで多くのことができます。サブフッターメニューを追加するか、ドキュメントのスクロールステータスに応じてフッターを固定/静的に変換します。また、遊んでみると、静的/固定メニューが表示されます。とてもいい方法で。

私はいつもここから助けを得ているので、これが他の誰かに役立つことを願っています。皆様、ありがとうございました。

タリク

于 2017-12-14T23:25:19.210 に答える