Форум

Spasatel801 · #1 (**permalink**) 03.08.2012, 15:25

Здраствуйте. Есть скрипт плавающего блока на jQuery:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
    $(function() {
        var offset = $("#fixed").offset();
        var topPadding = 0;
        $(window).scroll(function() {
            if ($(window).scrollTop() > offset.top) {
                $("#fixed").stop().css({marginTop: $(window).scrollTop() - offset.top + topPadding});
            }
            else {$("#fixed").stop().css({marginTop: 0});};});
});
</script>

Помогите дописать так что бы блок останавливался при подходе к другому блоку, например <div id="footer">. Заранее благодарен!

Deff · #2 (**permalink**) 03.08.2012, 15:46

Spasatel801,
Выложите HTML данного "плавающего" блока и его обрамления - и обрамление <div id="footer"> вместе с ним и
обоюдное общее родительским обрамлением этих элементов

Spasatel801 · #3 (**permalink**) 03.08.2012, 18:45

вот HTML разметка страницы:

<body id="top">
 <table border="0" cellpadding="0" cellspacing="0" width="1100px" valign="top"> 

<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 id="footer"> но желательно чтоб до <div id="dashboard"> 

             </div> 
           </div>
    </div>
    </td>
  <!--Центральная колонка-->
 <td width="580px" id="center-sidebar" valign="top">  
 
 Вот здесь находиться основной контент 
 
  </td>

     <!--Правая колонка-->
    <td width="240px" valign="top"> 
    
     Вот здесь контент правой колонки 
   
    </td>
</tr>
</table>
     
 

     
<!--// footer -> //-->


<div class="clearer"> </div>
 <div id="dashboard"> 
    
 вот здесь ка бы идет навигационный блок 
   
</div>
<div id="footer">
   Нижняя часть сайта 
</div>  
  </body>

и вот CSS блоков :

/* Dashboard */

#dashboard {
	border: 1px solid #E7E7E7;
    padding: 14px 16px;
    background: #F6F6F6;
    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;}
#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 {position: absolute}

Deff · #4 (**permalink**) 03.08.2012, 18:56

Ок - к завтра гляну

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>

Spasatel801 · #6 (**permalink**) 04.08.2012, 07:34

Спасибо я попробую, сейчас на работу просто ) как приду внедрю и отпишусь как получилось )

Spasatel801 · #7 (**permalink**) 05.08.2012, 13:07

Deff спасибо огромное все внедрил, то что надо просто )

Форум

Справочник

Discord чат

Курсы javascript