固定侧边栏内部包装 div

Posted 2023-05-08

【中文标题】固定侧边栏内部包装 div

【英文标题】：Fixed sidebar inside wrapping div

【发布时间】：2012-04-27 00:55:29

【问题描述】：

您好，我一直在尝试在包装 div 内制作一个固定的侧边栏，但没有运气。该页面是http://www.rayshaft.com/sample.html，当我向下滚动其他新闻部分时，我需要侧边栏保持固定。部分结构是这样的：

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

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

【问题讨论】：

欢迎来到 SO。这对我们来说有点难以分析。尝试分解页面，直到达到所需的效果。然后在保持效果的同时再次建立。

可能有另一种方法可以让我得到想要的效果？

分解页面确实有帮助，谢谢。我想我在我的 html 中的某个地方搞砸了，但我使用这个示例 jsfiddle.net/bryanjamesross/VtPcm 再次构建我的页面，现在一切正常

【参考方案1】：

尝试使用 .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!