Javascript 检测div有多少超出窗口高度

我有一个固定的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>


$（窗口）。滚动（函数（）{
var css={}；
如果（$（窗口）.scrollTop（）>120）{
css={top:'0'}；
} 
否则{
css={top:'120'}；
}
$（'#writencontent'）.animate（css，{duration:200，queue:false}）；
});

这使它向上移动，但这并不理想，原因有很多。我想知道有多少div是隐藏的，然后向上移动，或者让固定div可以滚动。理想情况下，这两种情况中的任何一种都应仅在必要时发生，即如果div适合窗口，则不采取任何措施

任何想法都会很棒

===================更新=================

大家好，这里是一个快速显示类型的事情。这是一个精简版，但显示了我的问题。如果窗口的大小调整为小于内容保存div，我们会将其松开。
好的，首先，你说它是一个固定div，这通常意味着
位置：固定
，然后你说
位置：相对
？这些是指什么？但它真的应该是滚动的。您说过您尝试了y-overflow，但这当然行不通。它是
溢出-y
，后面是y。再试一次，看看是否有效。如果它不起作用，那么您需要发布所有相关的代码和样式，这样我们就可以看到发生了什么

另外，它有点粗俗，但可以尝试使用
max height:
，其变化百分比小于100%，以查看它是否工作正常
 如果我理解正确，这将对你有用

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


更新以响应示例JSFIDLE：

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

var$win=$（窗口），
$winHeight，
$writtenContent=$（“#writtenContent”），
$writtenContentPosition，
$writenContentHeight，
$writtenContentBottomEdgePosition，
高差；
函数计算权重（）{
$winHeight=$win.height（）；
$writtenContentPosition=$writtenContent.offset（）.top；
$writtenContentHeight=$writtenContent.height（）；
$writtenContentBottomEdgePosition=$writtenContentPosition+$writtenContentHeight；
heightDifference=$winHeight-$writtenContentBottomEdgePosition；
}
函数windowResizeMagic（）{
计算重量（）；
如果（高差<0）{
$（'#alert'）.html（'+heightDifference+'px'将书面内容移出屏幕）；
}否则{
$（'#alert'）.html（'书面内容不是屏幕外的'）；
}
}
$（文档）.ready（函数（）{
计算重量（）；
$win.resize（函数（）{
windowResizeMagic（）；
});
});
Hmm你说它是一个固定的div，通常意思是
position:fixed
，但是你说
position:relative
？这些是指什么？你能发布更多的代码来帮助这一点吗？也许设置密码笔或小提琴？这可能是html或css的问题。。。这个脚本可能是不必要的。。。只是一种思想上的遗憾，我没办法让它发挥作用。它看起来应该做我想要做的事情，但似乎没有效果？@user3462105它没有编写应用程序，只是提供了一个句柄来完成它。因此-在
windowScrollMagic（）
中的
if
语句中，编写您希望它执行的任何操作。根据我对你的问题的理解，你可以在新的位置添加如下内容来设置
$writencontent
的动画：
$writencontent.animate（{scrollTop:win.scrollY}，200）谢谢你的回复@technofarmer-你有没有设法让它工作起来？抱歉@PSK，刚刚看到这个。看起来你想要的是完全不同的东西。这是最新的提琴：