jquery - 修复了包裹 div 内的侧边栏

标签 jquery css scroll sidebar css-position

嗨,我一直在尝试在包装 div 内制作一个固定的侧边栏,但还没有成功。页面是http://www.rayshaft.com/sample.html当我向下滚动其他新闻部分时,我需要侧边栏保持固定。部分结构如下:

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

我尝试在“辅助”部分内进行绝对定位,已修复,这实际上相对于浏览器窗口修复了侧边栏,并且我尝试了这个查询,这似乎正是我所需要的: http://jsfiddle.net/bryanjamesross/VtPcm/但我无法让它与我的页面一起工作。知道我做错了什么吗?提前致谢

最佳答案

尝试使用 .position() 而不是 .offset() 并从脚本末尾删除多余的符号â€<

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

关于jquery - 修复了包裹 div 内的侧边栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10161514/

相关文章:

php - 我正在对 ajax 处理添加加载效果。它在 mozilla 中工作正常,但 css 在 chrome 中不起作用

html - 如何控制 flex 元素的子div高度

javascript - 如何排列图像 3x3?

html - 文本对齐未按预期工作

javascript - 修复表头

html - 固定侧边栏内的狮身人面像雪花石膏主题滚动

javascript - 为什么我的类(class)名称没有改变和移动跨度

javascript - 如何使用 formvalidation.io 和 jQuery 验证单选按钮?

javascript - Twipsy 和 Tablesorter 的 Heroku Assets 在本地不起作用,是的

HTML `dialog` 元素 : scroll content independently of background