Question

我想设定一个固定和相对的位置。我的所有内容都有一个大的div。当我将div的位置设置为relative时，它将对齐到我的内容div的左侧。当我将该位置更改为固定时，它与我的浏览器端对齐。我被告知没有css解决方案，但还有其他方法。

基本上我试图获得与本网站右侧栏相同的效果： 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>

Answer 1

下面使用的函数isScrolledIntoView()来自另一个问题Check if element is visible after scrolling

示例说明

首先我们有一个功能isScrolledIntoView()，只要在浏览器查看区域内看到一个元素，它就会返回true或false。

你需要使用两个div或某种锚点和一个跟随div。您的锚点div用于确定何时应将跟随div切换为固定样式以跟随滚动或切换回绝对位置（如果锚点在视图中后退以将跟随div返回到页面上的原始位置。） / p>

使用你的锚点，在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演示

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

1 个答案: