如何设置div元素的位置固定和相对？

我想设置一个固定位置和相对位置。我的所有内容都有一个大的div。当我将div的位置设置为相对时，它与我内容div的左侧对齐。当我改变这个位置来修复它时，它与我的浏览器端保持一致。我被告知没有css解决方案，但有没有其他方法。如何设置div元素的位置固定和相对？

基本即时通讯试图让在这个网站上，右手栏同样的效果： http://www.nytimes.com/interactive/us/sept-11-reckoning/viewer.html

代码：

#content{ 
width: 1000px; 
margin-right: auto; 
    margin-left: auto; 
} 

    #text{ 
    position: fixed; 
    } 


    <div id='content'> 
     <div id='text'>Welcome to the site</div> 
    </div>

来源

2011-11-19 kirby

设立顶部和左侧的#text –

看看这个：http://imakewebthings.github.com/jquery-waypoints/ – Purag

下面使用的功能isScrolledIntoView()是另一个问题Check if element is visible after scrolling

实例说明

首先，我们具有功能isScrolledIntoView()，如果元素在浏览器查看区域内可见，则该函数仅返回true或false。

您需要使用两个div或某种锚点和后续div。您的锚定div用于确定何时应将后续div切换为固定样式以跟踪滚动，或者如果锚点返回到视图中以将后续div返回到其在页面上的原始位置，则切换回绝对位置。

使用您的定位点跟踪div来检查元素在查看区域中是否可见，我们可以利用窗口上的jQuery .scroll()事件绑定方法在用户滚动时触发事件页。

脚本示例

$(window).scroll(function() { 
    if (! isScrolledIntoView($('#anchor'))) 
    { 
     // anchor div isn't visible in view so apply new style to follow div to follow on scroll 
     $('#follow').css({ position: 'fixed', top: '10px' }); 
    } 
    else 
    { 
     // anchor div is visible in view so apply default style back to follow div to place in default position 
     $('#follow').css({ position: 'absolute', top: '100px' }); 
    } 
}); 

function isScrolledIntoView(elem) 
{ 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 

    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).height(); 

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)); 
}

Fiddle演示

来源

2011-11-19 05:19:22

如何设置div元素的位置固定和相对？

回答

相关问题