TBS Dropdown Overflow Problem

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div class="scroll">
    <div class="out_element">
    <div class="btn-group">
        <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
            Ação <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Ação</a></li>
          <li><a href="#">Outra ação</a></li>
          <li><a href="#">Algo a mais aqui</a></li>
          <li class="divider"></li>
          <li><a href="#">Link separador</a></li>
        </ul>
    </div>
</div>
    <div class="out_element">
    <div class="btn-group">
        <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
            Ação <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Ação</a></li>
          <li><a href="#">Outra ação</a></li>
          <li><a href="#">Algo a mais aqui</a></li>
          <li class="divider"></li>
          <li><a href="#">Link separador</a></li>
        </ul>
    </div>
</div>
    <div class="out_element">
    <div class="btn-group">
        <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
            Ação <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Ação</a></li>
          <li><a href="#">Outra ação</a></li>
          <li><a href="#">Algo a mais aqui</a></li>
          <li class="divider"></li>
          <li><a href="#">Link separador</a></li>
        </ul>
    </div>
</div>
    <div class="out_element">
    <div class="btn-group">
        <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
            Ação <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Ação</a></li>
          <li><a...

CSS

body{
    height: 2000px;
}
.scroll{
    white-space: nowrap;
    width: 100%;
    overflow: auto;
    margin-top:100px;
}
.out_element{
    width: 200px;
    height: 100px;
    border: 1px solid #000;
    margin: 10px;
    display: inline-block;
}
ul.dropdown-menu{
    position:fixed;
    overflow:visible;
}

JavaScript

$('button.dropdown-toggle').click(function(){
    var pos = $(this).offset(); //posição do elemento
    var alt = $(this).height(); //altura do elemento
    var w = $(window);
    //adiciona a posição que o elemento deve ficar corrigindo se houver scroll
    $(this).siblings('ul.dropdown-menu').css({"left":pos.left-w.scrollLeft(),"top":pos.top+alt-w.scrollTop()
    });
});
$(window).scroll(function(){
    //corrige a posição do elemento quando houver scroll
    var pos = $('.open>.dropdown-menu').siblings('button.dropdown-toggle').offset();
    var alt = $('.open>.dropdown-menu').siblings('button.dropdown-toggle').height();
    var w = $(window);
    $('.open>.dropdown-menu').css({"left":pos.left-w.scrollLeft(),"top":pos.top+alt-w.scrollTop()
    });
});
//para fechar qdo scroll div
$('.scroll').scroll(function(){
    $('.open>.dropdown-menu').dropdown('toggle');
});