0

div を別の div の下部に配置したいと考えています。これだけで解決できます

bottom: 0px;
postion: fixed;

しかし、含まれている div がウィンドウよりも大きい場合は、内側の div をウィンドウの下部に固定したいと考えています。

最初の条件を破棄して、内側の div をコンテンツの下に配置する方が簡単な場合、重要な部分は、コンテンツが常に表示されている必要があるということです。

4

2 に答える 2

1

最善の解決策は、フッターがビューポート内に表示されているかどうかを JavaScript で検出することです。そうでない場合は、含まれている div のスタイルではなく、ウィンドウの下部に固定するようにスタイルを変更する必要があります。

この関数を使用して、ビューポートにあるかどうかを確認できます。

function elementInViewport(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top >= window.pageYOffset &&
    left >= window.pageXOffset &&
    (top + height) <= (window.pageYOffset + window.innerHeight) &&
    (left + width) <= (window.pageXOffset + window.innerWidth)
  );
}

(現在のビューポートで DOM 要素が表示されているかどうかを確認する方法は? から取得)

これで、ページをスクロールまたはサイズ変更するたびに、その機能を実行するチェックを実行できます。それに基づいて、探していることを実行するクラスを設定するか、CSS プロパティを変更するかを決定できます。

コードを含めていないので（将来的には含めてください）、コードは次のようになると想定します。

<div class="wrapper">
    (contents)

    <div class="footer">footer</div>
</div>

.footerの下部にを貼り付ける.wrapperには、'position: absolute' が必要であり、ラッパーにはposition: relative. ただし、positionプロパティを に変更しfixed、ラッパーをstatic(すべての要素のデフォルト) に変更すると、代わりにフッターがウィンドウの下部に固定されます。

この例を見るhttp://jsfiddle.net/GMYEh/

ここで、上記のスクリプトを使用して、2 つのうちどちらにすべきかを判断できます。フッター自体ではなく、フッターの同じ位置で偽の要素を使用する必要があります。そうすれば、フッターをウィンドウの下部に移動しても、ラッパーの下部がビューポートにあるかどうかを測定できます。（フッター自体を測って動かすと引っ掛かります）。

これを行うスクリプト (jQuery):

// add a fake footer after the wrapper
$('.wrapper').after($('<div class="fakefooter" />'));

$(document).on('resize scroll', function(e){
    //measure if the fake footer is in viewport
    if(elementInViewport($('.fakefooter')[0])) {
        // If so, it should be in the bottom of the wrapper. 
        $('.wrapper').css('position', 'relative');
        $('.footer').css('position', 'absolute');
    } else {
        // else it should be in the bottom of the window
        $('.wrapper').css('position', 'static');
        $('.footer').css('position', 'fixed');
    } 
});

作業例: http://jsfiddle.net/GMYEh/4/

于 2013-10-10T12:51:35.560 に答える
0

これを試して：

HTML :

<div id="wrapper">
    <div id="innerContent"></div>
</div>

CSS :

.fixedContent {
    position: fixed;
    bottom: 0;
}

そしてJavaScript：

var wrapper = document.getElementById('wrapper');
var content = document.getElementById('innerContent');
function position() {
    if (wrapper.offsetHeight + wrapper.offsetTop - content.offsetHeight - window.scrollY > window.innerHeight) {
        content.className += ' fixedContent';
    } else {
        content.className = content.className.replace('fixedContent', '');
    }
}

window.onload = position;
window.onresize = position;

jQueryを使用できる場合は、JavaScript をよりシンプルで互換性のあるものにすることができます

var $wrapper = $('#wrapper');
var $content = $('#innerContent');
$(window).on('load resize', function() {
    $content.toggleClass('fixedContent', $wrapper.outerHeight(true)  $content.offset().top - $content.outerHeight(true) - $(document).scrollTop() > $(window).height());
});

編集:垂直スクロール値と上部オフセットを追加して、条件を少し変更しました。

于 2013-10-10T13:11:38.570 に答える