jquery拖动来调整div并在移动设备上显示内容

Question

我有一个onscrolling标题效果，在向下滚动时缩短标题，并在向上滚动时显示完整的标题。

现在我想通过触摸手机拖动打开标题并显示内容，而不仅仅是标题大小。

在这里你可以看到一个屏幕记录： http://cl.ly/13332b2L1k0Y

<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<link href="css/jquery-ui-1.10.4.custom.css" rel="stylesheet" type="text/css">

<header id="resizable" class="ui-widget-content">
    <div class="container">
        <div class="row">
            <div class="web-nav">
                <ul id="nav-left" class="span5 alignright">
                    <li><a href="#about" class="active">about</a></li>
                    <li><a href="#portfolio">portfolio</a></li>
                </ul>
                <div id="logo" class="span2"><h1><a href="index.html">vranz</a></h1></div>
                <ul id="nav-right" class="span5">
                    <li><a href="#jobs">jobs</a></li>
                    <li><a href="#contact">contact</a></li>
                </ul>
                <div class="logoicon"><h1><a class="scroll-to-top">vranz</a></h1></div>
                <br class="clear" />
            </div>
       </div>
   </div>
</header>


<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.ui.touch-punch.min.js" type="text/javascript"></script>


<script>
$(function() {
 $( "#resizable" ).resizable({
  maxHeight: 400,
  minHeight: 80,
 });
});
</script>


<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/application.js" type="text/javascript"></script>

如何让logoicon作为事件处理程序执行？