2013-05-11 8 views
1

Я использую анимированную боковую панель, которая прокручивается вместе с прокруткой окна и останавливается, когда она достигает нижнего колонтитула.jQuery animate проблемы с боковой панелью

jQuery(document).ready(function() { 

var jQuerysidebar = jQuery("#sb"), 
    jQuerywindow = jQuery(window), 
    offset = jQuerysidebar.offset(), 
    sbh = jQuerysidebar.height(), 
    footer = jQuery("#footer").offset().top; 


jQuerywindow.scroll(function() { 
    if (jQuerywindow.scrollTop() > offset.top ) { 
     if (jQuerywindow.scrollTop() + jQuerysidebar.height() < footer) { 
      jQuerysidebar.stop().animate({ 
       marginTop: jQuerywindow.scrollTop() - 8 
      }); 

     } 
    } else{ 
     jQuerysidebar.stop().animate({ 
      marginTop: 0 
     }); 
    } 
}); 

}); 

Поскольку высота боковой панели> что высота окна, я не могу легко получить доступ к нижней части боковой панели: когда я прокрутка вниз также идет вниз ...

Я хотел бы врезка начинает прокрутку только после того, что я достигну своего конца ... до сих пор я был в состоянии получить этот результат только частично:

if (jQuerywindow.scrollTop() > jQuerysidebar.height() ) { 

Как видно, после того, что значение scrollTop является>, чем высота боковой панели , он продолжает прокручивать снова ... так что этот код работает только один раз: D

Есть ли лучший способ сделать прокрутку боковой панели только после этого, я доберусь до ее конца?

Я пробовал и другие решения, но я получил для каждой новой попытки какую-то другую проблему. (Я новичок в использовании JQuery ...)

Спасибо за вашу помощь :)

+0

Будет ли он работать, если вы установите 'position: relative' в' # sb', а затем отключите 'marginTop' только с' top'? В этом примере я сделал: http://jsfiddle.net/KWn8e/ – JAM

+0

Я пробовал, но я не получил ожидаемого результата. Боковая панель все еще сдвигается, прежде чем я доберусь до конца. – Gabrielcik

ответ

0

сегодня я попытался переписать код и это результат:

jQuery(document).ready(function() { 

var jQuerysidebar = jQuery("#sb"), 
    jQuerywindow = jQuery(window), 
    offset = jQuerysidebar.offset(), 
    sbh = jQuerysidebar.height(), 
footer = jQuery("#footer").offset().top; 


jQuerywindow.scroll(function() { 

    // here It check the win scrolltop to be > than sidebar height + its offset.top value 
// and in the same time that the sidebar height*2 (+offset.top) is not bigger than the footer offset top. 
// if this is true, than marginTop = sidebar height 
    if ((jQuerywindow.scrollTop() > sbh+offset.top) & (((sbh*2)+offset.top) < footer)) { 

      jQuerysidebar.stop().animate({ 
       marginTop: sbh 
        }); 
    // if the sidebar height*2 (+offset.top) is bigger than the footer offset.top value, than 
    // the marginTop will be set = to the sidebar height - the difference between the sidebar height*2 and the footer (to this last value is also removed the sidebar offset.top) 
    // 10 is for to add some more space between the sidebar and the footer 
    }else if ((jQuerywindow.scrollTop() > sbh+offset.top) & (((sbh*2)+offset.top) > footer)) { 
      jQuerysidebar.stop().animate({ 
      marginTop: (sbh + (footer-(sbh*2)) - (offset.top+10)) 
     }); 

    } else { jQuerysidebar.stop().animate({ 
      marginTop: 0 
     }); 
    } 

    // here it does the same thing as above but for values of scrolltop > than sidebar height*2 (+ offset.top value) 
      if (jQuerywindow.scrollTop() > (sbh*2)+offset.top & (((sbh*3)+offset.top) < footer)) { 
     jQuerysidebar.stop().animate({ 
       marginTop: sbh*2    }); 

     }else if ((jQuerywindow.scrollTop() > (sbh*2)+offset.top) & (((sbh*3)+offset.top) > footer)) { 

      jQuerysidebar.stop().animate({ 
      marginTop: ((sbh*2) + (footer-(sbh*3)) - (offset.top+10)) 
     }); 

    } 

}) 

}); 

Я надеюсь, что это Безразлично» t сделайте у вас головную боль: D

Это работает ... но он немного длинный и, вероятно, существует лучший способ получить тот же результат. В результате боковая панель будет прокручиваться только после того, как я доберусь до конца, не двигаясь.

Я могу повторить код для каждой новой боковой панели прокрутки (здесь боковой панели прокрутки только 2 раза)

Можете ли вы помочь мне, чтобы сделать его более компактным? thx!

Смежные вопросы