How do I get the sidebar to move up

跟風遠走 提交于 2020-01-03 04:54:36

问题


I have this page and I want the sidebar to slide down with the user and it works well but if you are on a small screen like 1024 * 768 you will not see the bottom. Here is some of the code I used to make the sidebar work. Any suggestions on how I can change this behavior.

$(window).scroll(function(){ 
    sidebar_position();
});
$(window).resize(function(){ 
    sidebar_position();
});


function sidebar_position(){
    var w_width = ($(window).width() -1000) /2;
    $('#sidebar').css('left', w_width);

    var sidebar_height = $('#sidebar').outerHeight();
    var content_height = $('#widecolumn').outerHeight();
    var w_height = $(window).height();

    if ( sidebar_height > w_height) {
        $('#sidebar').css('position', 'absolute');
    } else {
        $('#sidebar').css('position', 'fixed');
    };

    if (sidebar_height > content_height) {
        content_height = sidebar_height;
        $('#widecolumn').css('min-height', content_height);
    };


    if($.browser.msie && $.browser.version == 6 ){
        $(window).scroll(function(){ 
            $('#sidebar').css({
                top: $(window).scrollTop()
            });
        })
    }
}

I am sort of lost of what to do next....and how to fix this


回答1:


Hm small screens are a problem either way since the sidebar is almost 600 px high so on netbooks it probably won't fit in the browser window at all.

But you could leave the sidebar on position absolute until the sidebar reaches the top when scrolling and then switch to position fixed so it stays at the top of the screen.
That way it will use the available screen height



来源:https://stackoverflow.com/questions/6539926/how-do-i-get-the-sidebar-to-move-up

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!