Geek asks and answers

Fixed sidebar inside div wraps

Hi, I tried to create a fixed sidebar inside a div wrapper, but I still had no luck. The page is http://www.rayshaft.com/sample.html , and I need the sidebar to stay stationary while I scroll down the other news section. The structure of the section is as follows:

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

I tried absolute positioning inside the "secondary" section, fixed that actually fixes the sidebar relative to the browser window, and I tried this request, which seems to be exactly what I need: http://jsfiddle.net/bryanjamesross/VtPcm/ but I couldn’t get it to work with my page. Any idea what I'm doing wrong? thanks in advance

+3
source share
1 answer

Try using .position()instead .offset()and remove extra characters from your end of script​

$(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!
0
source

More articles:


All Articles