1

ナビゲーション バーをビュー ポートの下部に貼り付けたいのですが、固定高さのスティッキー フッターと重ならないようにします。

マークアップは次のとおりです。

<div id="wrap">
  <div id="main"></div>
</div>
<div id="footer"></div>
<div id="command-bar"></div>

CSS はcssstickyfooter.comのとおりです。

http://jsfiddle.net/z2C5S/2/で例を見ることができます。

アップデート

次の JavaScript に近づくと、非常にゆっくりと上にスクロールすると、少しオーバーラップしているように見えます ( http://jsfiddle.net/z2C5S/16 )

$(function () {

  var setCommandBarPosition = function () {
    var footerOffset = $("#footer").offset().top;
    var scrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();

    var weOverlappedFooter = ((windowHeight + scrollTop) >= (footerOffset + 40)); // + the height of the command bar

    $("p").html("Overlapped: " + weOverlappedFooter);

    if (weOverlappedFooter) {
      $("#command-bar").removeClass("affix-bottom");
    } else {
      $("#command-bar").addClass("affix-bottom");
    }
  };

  $(window).scroll(function () {
    setCommandBarPosition();
  });

  setCommandBarPosition();
});
4

3 に答える 3

1

これが私の解決策です：

http://jsfiddle.net/z2C5S/14/

基本的には、プライマリ ナビゲーション バーのように見えるセカンダリ ナビゲーション バーを追加し、フッター内に配置します。フッターにメイン ナビゲーションの上に z-index を付けて、下にスクロールすると、フッターとセカンダリ ナビゲーションがメイン ナビゲーションを覆い隠します。

<div id="wrap">
    <div id="main"></div>
</div>

<div id="footer">
    <div id="second-command"></div>
</div>
<div id="command-bar"></div>

* {
    margin:0;
    padding:0;
}
html, body {
    height: 100%;
}
#wrap {
    min-height: 100%;
}
#main {
    overflow:auto;
    min-height: 800px
}
/* must be same height as the footer */
#footer {
    position: relative;
    margin-top: -180px;
    /* negative value of footer height */
    height: 180px;
    clear:both;
    background-color: #999;
    z-index:2;
}
/*Opera Fix*/
body:before {
    /* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
    /* thank you Erik J - negate effect of float*/
}

#command-bar {
   position: fixed;
   bottom: 0px;
   left: 0;
   right: 0;
   height: 40px;
   background-color: #000;
   z-index:1;
}

#second-command {
  height:40px;
  width:100%;
  background-color:blue;
}

はい、一方が他方と重なっている小さなセクションがありますが、これは CSS で私が知っている最も簡単な方法です。

于 2013-01-16T20:33:10.903 に答える
0

やがて希望の効果が得られました。

コマンドバーがメインラッパーdiv内に配置されるようにマークアップを変更する必要がありました。これは、小さいページ（スクロールは不要）で、コマンドバーがスクロールバーを強制せずにdivの上に配置されるようにするためでした。

<div id="wrap">
  <div id="command-bar">
    <p></p>
  </div>
  <div id="main"></div>
</div>
<div id="footer"></div>

次のコードは、ページのスクロール位置に基づいてコマンドバーの位置を調整する役割を果たします。基本的に、スクロール時にビューポートがフッターと重なっていないかどうかを確認しています。

$(function () {

  var setCommandBarPosition = function () {
    var footerOffset = $("#footer").offset().top,
        scrollTop = $(window).scrollTop(),
        windowHeight = $(window).height(),
        commandBarHeight = $("#command-bar").height(),
        weOverlappedFooter = ((windowHeight + scrollTop - commandBarHeight) >= footerOffset);

    $("p").html("Overlapped: " + weOverlappedFooter);

    if (weOverlappedFooter) {
      $("#command-bar").removeClass("affix-bottom");
    } else {
      $("#command-bar").addClass("affix-bottom");
    }
  };

  $(window).scroll(function () {
    setCommandBarPosition();
  });

  setCommandBarPosition();
});

標準のスティッキーフッターCSSとは別に、フッターに到達したときにコマンドバーが絶対に設定されていることを確認します。

#command-bar {
  bottom: 180px;
  height: 40px;
  width: 100%;
  background-color: black;
  position: absolute;
  z-index: 1;
}
p {
  color: white;
}
#command-bar.affix-bottom {
  position: fixed;
  bottom: 0;
}

http://jsfiddle.net/benfosterdev/TKMaaでの作業デモ。

于 2013-01-16T21:02:28.530 に答える
0

@BenFoster の答えは私にとってはうまくいきませんでした。

webOverlapped の計算では、次を使用しました。

    footerOffset = $("footer").offset().top
    commandBarTop = 30; // had to copy this value from css, not completely DRY solution
    commandBarBottom = $("#command-bar").outerHeight( true)+navBarTop+$(window).scrollTop();
    weOverlappedFooter = ((commandBarBottom) >= footerOffset);

そしてCSSのために

affix-bottom {
    position:absolute;
    top:initial;
    bottom:40px;
}

それ以外の場合は、上記のベンの残りのソリューションを使用しました。

于 2014-10-23T18:14:39.470 に答える