Feste Seitenleiste in der Verpackung div

Hi Ich habe versucht, eine feste Seitenleiste in div Wrapping zu machen, aber noch kein Glück. Die Seite ist http://www.rayshaft.com/sample.html und ich brauche die Sidebar, um fest zu bleiben, während ich den anderen Nachrichtenabschnitt herunterscrolle. die Abschnittsstruktur ist wie folgt:Feste Seitenleiste in der Verpackung div

<section class="secondary"> 
<section id="sidebar"> 
... 
</section> 
<section id="othernews"> 
... 
</section>

ich absolute Positionierung innerhalb „sekundären“ Abschnitt versucht, fest, dass die Seitenleiste tatsächlich fixiert relativ zu Browser-Fenster, und ich versuchte, diese Abfrage, die genau zu sein scheint Was ich brauche: http://jsfiddle.net/bryanjamesross/VtPcm/ aber ich konnte es nicht mit meiner Seite arbeiten lassen. Irgendeine Idee was mache ich falsch? Vielen Dank im Voraus

Quelle

2012-04-15 Jenya Muraveva

Willkommen bei SO zu verwenden. Das ist schwer zu analysieren. Versuchen Sie, die Seite aufzuschlüsseln, bis der gewünschte Effekt funktioniert. Dann wieder aufbauen und dabei den Effekt beibehalten. – NGLN

kann es eine andere Möglichkeit für mich geben, den gewünschten Effekt zu bekommen? –

Nun, die Seite zu brechen half tatsächlich, danke. Ich glaube, ich habe irgendwo in meinem HTML-Code verwirrt, aber ich habe dieses Beispiel http://jsfiddle.net/bryanjamesross/VtPcm/ verwendet, um meine Seite wieder zu bauen und jetzt funktioniert alles ok –

Try .position() statt .offset() und entfernen Sie zusätzliche Symbole von Ihrem Ende Skript â€‹

$(function() { 
    var top = $('#sidebar').position().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0)); 
    var footTop = $('#footer').position().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0)); 
    var maxY = footTop - $('#sidebar').outerHeight(); 
$(window).scroll(function(evt) { 
    var y = $(this).scrollTop(); 
    if (y > top) { 
     if (y < maxY) { 
      $('#sidebar').addClass('fixed').removeAttr('style'); 
     } else { 
      $('#sidebar').removeClass('fixed').css({ 
       position: 'absolute', 
        top: (maxY - top) + 'px' 
      }); 
     } 
    } else { 
     $('#sidebar').removeClass('fixed'); 
    } 
}); 
}); //â€‹ What are this symbols ???? remove them!

Quelle

2012-04-15 11:32:52

Feste Seitenleiste in der Verpackung div

Antwort

Verwandte Themen