Как переместить div вверх при прокрутке вниз

Question

Как переместить div вверх при прокрутке вниз

0

Я создаю для себя небольшой html файл, чтобы попробовать что-то новое. до сих пор у меня есть заголовок, фон и центральная область для контента. он находится в центре, и положение установлено как фиксированное.

Я хочу, чтобы это произошло, когда кто-то прокручивается вниз, центральная область будет двигаться вверх. Так что не будет большого белого пространства наверху. Кроме того, когда они прокручиваются вверх, поэтому центр находится ближе к вершине, он не будет проходить через заголовок.

Я уверен, что это можно сделать с помощью JavaScript. Но я не слишком уверен, как это сделать.

Простите, если это неясно.

Conor 31 дек. 2013, в 22:23

Источник

1

Можете ли вы опубликовать соответствующие HTML и CSS?
zero298 31 дек. 2013, в 21:15

Теги:

javascript

html

css

3 ответа

Ещё вопросы

Можете ли вы опубликовать соответствующие HTML и CSS?

A.O. · Answer 1 · 2013-12-31T20-05-00.000Z

Я рекомендую использовать jquery для этого.

Вы можете связать прослушиватель событий с событием scroll, обработчик передает event object со всей информацией, необходимой для достижения желаемого результата (scrolltop, pageX, pageY и т.д.).

После того как вы захватили событие прокрутки, вы можете указать, где прокручивается пользователь (как далеко вниз), и соответственно позиционировать ваш div.

http://api.jquery.com/scroll/

Thomas Cheney · Answer 2 · 2013-12-31T19-59-00.000Z

Это можно сделать без использования jquery или javascript, если вы хотите делать то, что я думаю. http://jsfiddle.net/wN8c8/, установив свой контент на фиксированный размер и настроив содержимое на переполнение: auto; Аналогично, вы также можете установить фиксированное фоновой привязку страницы и создать иллюзию, что текст "появляется" без перемещения страницы. Вы можете, конечно, углубиться в нее, используя скрипты, но это действительно зависит от ваших намерений.

z-index также позволит вам создавать страницу в слоях, чтобы вы могли определять, что показывает и что скрывается за другими элементами страницы.

body {
   background-color:yellow;
}
#header{
   position:fixed;
   width: 100%;
   height:20px;
   background-color:red;
   z-index:2;
}
#content{
   position:fixed;
   width:80%;
   height:60%;
   background-color:#ddd;
   overflow:auto;
   margin:0px 10%;
   z-index:1;
} 


<div id="header"></div>
<div id="content">
   This is some content.<br/>
   This is some content.<br/>
   This is some content.<br/>
</div>

Jack Tuck · Answer 3 · 2013-12-31T18-48-00.000Z

Это может быть достигнуто с помощью javascript или JQuery (JQuery - самый простой из двух).

1.) Используйте произвольные пиксели для определения, когда div должен двигаться.

function scrolling() {
if ($(body).scrollTop() > 120px)
    {
    ....perform div transition...
    }
}

ИЛИ

2.) Используйте позицию целевого div, чтобы определить, когда div должен двигаться.

function scrolling() {
if ($(body).scrollTop() > $("#TargetDiv").offset().top;)
    {
    ....perform div transition...
    }
}

Если вы используете второе решение, убедитесь, что вы вызываете JQuery и этот скрипт после загрузки DOM, т.е. после </body>. В противном случае он не сможет определить #TargetDiv.