Question

我有一个固定的div，我想坐在一些背景图像之上。问题是如果这个固定的div比窗口高，它就不会滚动，意味着内容丢失。我尝试过使用max-height: 100%和y-overflow:scroll;，但没有运气。

我使用以下javascript找到了解决方法：

<script>
  $(window).scroll(function(){
    var css = {};
    if  ($(window).scrollTop() > 120){
         css = { top:'0'};
    } 
    else {
            css = {top:'120'};
    }
    $('#writtenContent').animate(css,{duration:200,queue:false});
  });
</script>

提升了它，但出于多种原因，这并不理想。我想要么能够知道隐藏了多少div，然后向上移动那个数量，或者让固定div可以滚动。理想情况下，只有在必要时才会发生这些情况，即如果div适合窗口，则不采取任何行动。

任何想法都会很棒！

=============== UPDATE =================

大家好 - 这是一个快速jsfiddle显示事物的类型。它是一个精简版，但显示了我的问题。如果窗口的大小调整为小于内容保持div，我们将其松开。

Answer 1

好吧首先，你说这是一个固定的div，通常意味着position:fixed，但你说position:relative？这些是指什么？但它确实应该滚动。你说你试过y-overflow但当然不行。随后是overflow-y。再试一次，看看它是否有效。如果它不起作用，那么你需要发布所有相关的代码和样式，以便我们可以看到发生了什么。

此外它有点hackish但尝试使用max-height:不同百分比小于100％，看看它是否正常工作。

Answer 2

如果我正确理解你，这对你有用。

var win             = window,
    $writtenContent = $('#writtenContent'),
    $writtenContentPosition;

function windowScrollMagic(){

    $writtenContentPosition = $writtenContent.offset().top; // get elements distance from top

    // if you've scrolled farther than the elements position:

    if (win.scrollY > $writtenContentPosition) {

        // do something, like animating $writtenContent to the win.scrollY coordinate
    }
}

$(document).ready(function(){

    $(win).scroll(){

        windowScrollMagic();
    });
});

更新以响应示例jsfiddle：

var $win            = $(window),
    $winHeight,
    $writtenContent = $('#writtenContent'),
    $writtenContentPosition,
    $writtenContentHeight,
    $writtenContentBottomEdgePosition,
    heightDifference;

function calculateHeights() {

    $winHeight                        = $win.height();
    $writtenContentPosition           = $writtenContent.offset().top;
    $writtenContentHeight             = $writtenContent.height();
    $writtenContentBottomEdgePosition = $writtenContentPosition + $writtenContentHeight;

    heightDifference                  = $winHeight - $writtenContentBottomEdgePosition;
}

function windowResizeMagic() {

    calculateHeights();

    if (heightDifference < 0) {

        $('#alert').html('Written Content is off screen by ' + heightDifference + 'px');
    } else {
        $('#alert').html('Written Content is not off screen');
    }
}

$(document).ready(function(){

    calculateHeights();

    $win.resize(function(){

        windowResizeMagic();
    });
});

检测div超出窗口高度的程度

2 个答案: