javascript - 如何让侧边栏向上移动

标签 javascript jquery html css sidebar

我有这个page我希望侧边栏随着用户向下滑动并且效果很好但是如果你在像 1024 * 768 这样的小屏幕上你将看不到底部。这是我用来使侧边栏工作的一些代码。关于如何改变这种行为的任何建议。

$(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()
            });
        })
    }
}

我有点不知道下一步该做什么....以及如何解决这个问题

最佳答案

嗯,无论哪种方式,小屏幕都是一个问题,因为侧边栏几乎有 600 像素高,所以在上网本上它可能根本不适合浏览器窗口。

但是您可以将侧边栏保留在绝对位置,直到侧边栏在滚动时到达顶部,然后切换到固定位置,以便它保持在屏幕顶部。
这样它将使用可用的屏幕高度

关于javascript - 如何让侧边栏向上移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6539926/

相关文章:

javascript - 如何检查 HTMLElement 是否已完全加载

javascript - 允许用户将自己的 JavaScript 插入到我们的 Web 应用程序中会产生哪些安全后果?

jquery - 尝试从 jQuery ajax 获取响应中选择脚本标签

javascript - 不刷新页面更新SQL数据

php - 无法使用 xpath 获取 span 标记

javascript - 单独播放/暂停多个 HTML5 视频

javascript - 如何在 vue.js 中识别 fetch 何时完成

javascript - 从 html 元素中添加或删除类如何影响附加到这些元素的 onclick 和其他类似功能?

php - 使用 .one() 和 .get()

javascript - jQuery + CSS cursor mousedown + Chrome = 不工作