0

http://thenextweb.com/に似た方法で固定するサイドバーがあります。

これはバグのライブデモです: http://adamkochanowicz.com/static/build0502/kickstrap/_examples/contacts.html

問題を再現するには、ページを下にスクロールします。

そして、どういうわけか、問題のスクリーンショットを取得することができました :

下部の灰色の領域は、ページを下にスクロールしすぎたときに表示される「無人地帯」です。

stuckクラスをサイドバーに適用するタイミングを検出するためにjQuery Waypointsを使用しています。

が.stuck適用されると#sidebar、次の CSSが提供されます。

section#sidebar.stuck {
  width: 300px;
  position: fixed;
  top: 0;
  bottom: 0;
  border-color: #DDD;
  width: 25%;
  -webkit-box-shadow: 2px 2px 5px #eeeeee;
  box-shadow: 2px 2px 5px #eeeeee;
}

jQuery は非常に単純です。

<script>$('section#sidebar').waypoint('sticky');</script>

横のビューポートを縮小すると、なぜかこのバグは発生しません。たとえば、Chrome で下部にドッキングされた要素インスペクターを開くと、

4

1 に答える 1

1

contact.html の 866 行目で、クラス「.row」の CSS 行は次のようになります。

.row {
  margin-left: -15px;
  margin-right: -15px;
}

バグを削除するか、次のように設定すると、バグが修正されます。

.row {
  margin-left: 0px;
  margin-right: 0px;
}
于 2013-05-02T14:54:54.783 に答える