4

https://stackoverflow.com/a/8653109/1567848の別の投稿で見つけた解決策を使用して、問題を解決することはすでにかなり進んでいますが、実際のページで機能させることはまだできません。JSFiddle 内でのみ機能します。

ここに私のすでに完全な例があり、それはまさに私が望むように動作します: http://jsfiddle.net/enULV/ (実際のページで動作しないのはなぜですか?)。- 私の推測では、JavaScript に問題があると思われますが、私の JS は非常に貧弱です。

おそらく別の解決策として、下から一定量のピクセルを決定し、 が#footer_borderに重ならないように制限を設けることが考えられ#footerます。（別のランダムなアイデア-実際には、この他の方法を機能させることを好みます。）

その上、HTML マークアップと CSS をそのままにしておきたいと思います (そのため、このスクリプトを含めたいすべてのコンテンツでページがどのように構築されるか)。

事前にどうもありがとうございました。

4

2 に答える 2

8

おそらく、これはより良いサンプルになる可能性があります。HTML および CSS コードは、元の質問に基づいています。DIVブラウザ ウィンドウの高さよりも長いコンテンツの印象を与えるために、長いコンテンツのサンプルは でラップされています。コンテナ全体DIVをプレーンテキストなどに置き換えることができます。

function checkOffset() {
  var a=$(document).scrollTop()+window.innerHeight;
  var b=$('#footer').offset().top;
  if (a<b) {
    $('#social-float').css('bottom', '10px');
  } else {
    $('#social-float').css('bottom', (10+(a-b))+'px');
  }
}
$(document).ready(checkOffset);
$(document).scroll(checkOffset);
#social-float {
  position: fixed;
  bottom: 10px;
  left: 10px;
  width: 55px;
  padding: 10px 5px;
  text-align: center;
  background-color: #fff;
  border: 5px solid #ccd0d5;
  border-radius: 2px;
}
#footer { height: 5em; background: #888; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<div style="height:1000px">long content sample</div>
<div id="social-float">
  <div class="sf-twitter">twitter</div>
  <div class="sf-facebook">facebook</div>
  <div class="sf-plusone">plusone</div>
</div>
<div id="footer">footer sample</div>

于 2012-08-01T09:57:18.240 に答える
1

スクリプトに問題はありません。#footer_borderまたは のいずれposition:absoluteかを配置するだけposition:fixedです。Fixed はブラウザー ウィンドウに対して相対的に配置され、absolute は最初に配置された (静的ではない) 祖先要素 (この場合は#wrapper) に対して相対的に配置されます。

jsfiddle フレーム内から簡単に確認できるように、あなた#wrapperと380px を作成しました。であっても中央に#footer_border配置されていることを確認するために自動マージンを配置し、その後削除しました。ここで更新された jsfiddle を確認してください。 #footer_borderposition:fixedleft:0

http://jsfiddle.net/enULV/23/

この質問はほぼ 1 年前のものですが、これがまだ役立つことを願っています。

于 2013-04-19T08:24:51.447 に答える