javascript - 使用 jquery 根据内容和视口(viewport)高度更改 div 的位置

Question

当窗口高于内容高度时，我想在窗口底部固定一个 div。如果内容高度高于窗口高度，我希望 div 位置保持相对。

目前我主要使用此功能，但我根本不希望 div 与内容重叠。我尝试了以下各种形式，但仍然无法正常工作:

var body = content+bottomBar

if (body > viewport) {
    $(".bottom-bar").css({
      'position':'relative'
    });
} else {
  $(".bottom-bar").css({
    'position': 'fixed'
  })
}

我也无法让 window.resize 工作。

如有任何帮助，我们将不胜感激!

http://jsfiddle.net/no05x1vx/1/

Answer 1

引用jsfiddle linked by the OP ，这里有一些更改可以使代码按预期工作，请参阅评论:

var content = $(".content").height()
var viewport = $(window).height();

// Use innerHeight here as the bottom-bar div has height 0 and padding 60px
// .height() would return 0
var bottomBar = $(".bottom-bar").innerHeight();
var body = parseInt(content)+parseInt(bottomBar)

$(window).on('resize', function(){
    // Get new viewport height
    viewport = $(window).height();

    if (content > (viewport-bottomBar) ) {
        $(".bottom-bar").css({
            'position':'relative'
        });
    } else {
        $(".bottom-bar").css({
            'position': 'fixed'
        })
    }
});  

// Trigger resize after page load (to avoid repeated code)
$(document).ready(function(){
    $(window).resize();
});