Как установить фиксированное положение элемента div и относительное?

Question

Я хотел бы установить фиксированную и относительную позицию.У меня есть большой div для всего моего контента.Когда я устанавливаю положение div внутри относительно, оно выравнивается слева от моего содержимого 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() взята из другого вопроса Проверьте, виден ли элемент после прокрутки

Объяснение примера

First offу нас есть функция isScrolledIntoView(), которая просто возвращает true или false, если элемент виден внутри области просмотра ваших браузеров.

Вам необходимо использовать два элемента div или некоторую точку привязки и следующий элемент div,Ваш якорный div используется для определения того, когда нам следует переключить следующий div в фиксированный стиль, чтобы следовать за прокруткой, или переключиться обратно в абсолютное положение, если якорь возвращается в поле зрения, чтобы вернуть follow div в исходное положение на странице.

1016 * с вашей точки привязки после DIV, функция, чтобы проверить, если элемент отображается в области просмотра, мы можем использовать .scroll() событие метода связывания JQuery на окно, чтобы стрелять событие, когда пользовательпрокрутки на странице.

Пример сценария

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