Javascript-форум - Показать сообщение отдельно

Deff · #5 (**permalink**) 03.08.2012, 22:30

<html>
    <head>
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

      <style>
body {
	padding-top:100px;
	height:3000px;
}

.section-left .section-content{
	/* фиксируем высоту при выезде блока #fixed */
	height:57px;
}

/* Dashboard */

#dashboard {
	margin-top:430px; /*Отступ для теста*/

	border: 1px solid #E7E7E7;
	padding: 14px 16px;
	background: #7EFFBC;
	/*margin-top: 20px;*/
	text-align: left;
}

#dashboard a {
	color: #456;
	 text-decoration: none;
}

#dashboard a:hover {
	color: #000;
	text-decoration: underline;
}


/* Footer */

#footer {
	padding: 10px 0;
	border:1px red solid;
        #CEFFC9;
}

#footer a {
	color: #579;
	text-decoration: none;
}

#footer .right, #footer .right a {
	color: #999;
	text-decoration: none;
}

#footer .text-separator {
	padding: 0 3px;
	color: #BBB;
}

#footer a:hover {
	color: #000;
}

#fixed {
	width: 247px;
	position: absolute;
	z-index:1000;
	background: #B4B4FA;
}

#fixed.Fixed {
	position: fixed;
	z-index:1000;
	top:19px;
transition-property:top;
 -webkit-transition-property:top;
 -moz-transition-property:top;
 -o-transition-property:top;
 -ms-transition-property:top;

transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  -ms-transition-duration: 0.4s; /* IE9+ */
}

</style>
    </head>
    <body id="top">
      <table border="1" cellpadding="0" cellspacing="0" width="1100px" valign="top">
        <tbody>
          <tr valign="top">
            <!--Левая колонка-->
            <td width="240px" valign="top">
              <div class="section-left">
                <div class="vip-block">
       Какой то блок №1
     </div>
                <div class="vip-block">
       Какой то блок №2
     </div>
                <div class="vip-block">
       Какой то блок №3      
     </div>
                <div class="section-title">  Вот это не подвижная часть </div>
                <div class="section-content">
                  <div id="fixed">

              Вот эта часть чтобы двигалась доходила либо до но желательно чтоб до

                </div>
                </div>
              </div>
            </td>
            <!--Центральная колонка-->
            <td width="580px" id="center-sidebar" valign="top">  
 
 Вот здесь находиться основной контент 
 
    </td>
            <!--Правая колонка-->
            <td width="240px" valign="top"> 
    
     Вот здесь контент правой колонки 
   
    </td>
          </tr>
        </tbody>
      </table>
      <!--// footer -> //-->
      <div class="clearer"> </div>
      <div id="dashboard"> 
    
 dashboard навигационный блок 
   
 </div>
      <div id="footer">
   Нижняя часть сайта 
</div>


<script type="text/javascript">
 $(function() {
        var TopOld = $("#fixed").offset().top;
        var MaxBottom = $("#dashboard").offset().top - parseInt($("#fixed").height()); //&&
        var Delta = 19; //начало движения не доходя до верха;
        var Busy = false; //Занят обработкой;



        $(window).scroll(function() {

           if ( Busy ) { return false;}

            Busy = true;	 // Занят;
	    var ThisTop = $("#fixed").offset().top;
	    var Scroll = $(window).scrollTop();

            if (Scroll > (TopOld-Delta) && ThisTop < MaxBottom ){
                $("#fixed").addClass('Fixed');
	    } else  $("#fixed").removeClass('Fixed');

	    if (Scroll > MaxBottom) $("#fixed").removeClass('Fixed');

            Busy = false; //Освободилсяж

	});
 });
</script>


</body>
</html>