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();
});

根据内容和方式更改div的位置使用jquery

1 个答案: