Могу ли я держать DIV всегда на экране, но не всегда в фиксированном положении?

Ответ 1

Я отправил образец в качестве комментария, поэтому, полагаю, я напишу полный ответ на этот вопрос.

Разметка довольно проста, но для каждого раздела есть важные заметки.

HTML

<div id="page">
    <div id="header">
        <div id="header-inner"> <!-- Note #1 -->
            <img src="http://placehold.it/300x100" />
        </div>
    </div>
    <div id="content">
        <!-- Some Content Here -->
    </div>
</div>

CSS

#page {
    padding: 100px;
    width: 300px;
}

#header,
#header-inner { /* Note #1 */
    height: 100px;
    width: 300px;
}

.scrolling { /* Note #2 */
    position: fixed;
    top: 0;
}

JavaScript

//jQuery used for simplicity
$(window).scroll(function(){
  $('#header-inner').toggleClass('scrolling', $(window).scrollTop() > $('#header').offset().top);

  //can be rewritten long form as:
  var scrollPosition, headerOffset, isScrolling;
  scrollPosition = $(window).scrollTop();
  headerOffset = $('#header').offset().top;
  isScrolling = scrollPosition > headerOffset;
  $('#header-inner').toggleClass('scrolling', isScrolling);
});

Примечание # 1

Заголовок прокрутки будет прикреплен к верхней части страницы с помощью position: fixed, но этот стиль удалит контент из потока содержимого, что приведет к скачку содержимого, если его контейнер не сохранит исходную высоту.

Примечание # 2

Стили принадлежат CSS, однако может быть сложно правильно выровнять некоторые элементы с их исходной позицией. Возможно, вам потребуется динамически установить свойство left или right css с помощью JavaScript.

Ответ 2

Вам понадобится jQuery или тому подобное, см. мою скрипку здесь

Edit

Функция jQuery, где .form - это содержимое div, а .banner - это div, который состыкован

$(window).scroll(function() {
    t = $('.form').offset();
    t = t.top;

    s = $(window).scrollTop();

    d = t-s;

    if (d < 0) {
        $('.banner').addClass('fixed');
        $('.banner').addClass('paddingTop');
    } else {
        $('.banner').removeClass('fixed');
        $('.banner').removeClass('paddingTop');
    }
});

.fixed {
    position:fixed;
    top:0px;
}
.paddingTop{
    padding-top:110px;
}

Ответ 3

Я создал новую скрипку, которая, надеюсь, может быть полезна. DIV может быть произвольно позиционирован на странице и остается видимым при прокрутке.

http://jsfiddle.net/mM4Df/

<div id="mydiv">
  fixed div
</div>

<div class="ghost">
  fixed div
</div>

CSS

#mydiv { position: fixed;  background-color:Green; float:left; width:100%}
.ghost{opacity: 0}

возможно, есть лучшее решение, чем использование "призрака", но я не знаю, какой из них.

Ответ 4

Предположим, что верхняя позиция (в верхней части экрана) заголовка div составляет 100 пикселей в начале, вы можете сделать следующее: если верхняя часть окна прокрутки превышает 100 пикселей, установите div заголовка в положение фиксации с верхним 0px; если верхняя часть прокрутки окна меньше 100 пикселей, установите положение заголовка div с макетом по умолчанию. С jquery это выглядит следующим образом:

$(document).scroll(function() {
    if ($(this).scrollTop() > 100) {
        $('div#header').css({ 
            "position" : 'fixed',
            "top" : 0 });
    } else {
        $('div#header').css({ "position" : 'relative', "top" : 0 });
    }
});

он реализуется с помощью события прокрутки.

Ответ 5

Используйте CSS, чтобы зафиксировать его положение.

Предполагая, что ваш <div> имеет идентификатор "topdiv":

#topdiv {
    position: fixed;
    top: 0;
    left: 0
}

Обратите внимание, что вам нужно будет установить верхний край для содержимого, поскольку фиксированный div отобразит "поверх" содержимого:

#contentarea { margin-top: 35px; }

Отметьте fiddle.

Ответ 6

Похоже на то, что вы ищете, это div заголовка с двумя свойствами:

• Когда он будет обычно видимым, он останется в своем положении по умолчанию.
• Если он обычно невидим, он появляется в верхней части экрана.

Короче говоря, что-то вроде "max-top" (который не существует как свойство css).

Если вы хотите все это сделать, самый быстрый способ может включать некоторый JavaScript. Попробуйте this; если я получу некоторое время спустя, я обновлю это с помощью еще одного кода.

Ответ 7

Я считаю, что вы ищете div, который следует, когда вы прокручиваете вниз. Эта реализация может быть замечена для корзин покупок по количеству сайтов. Вы можете посмотреть http://kitchen.net-perspective.com/open-source/scroll-follow/

Еще одна хорошая ссылка: http://jqueryfordesigners.com/fixed-floating-elements/

Некоторая связанная коллекция примеров прокрутки: http://webdesign14.com/30-tutorials-and-plugins-jquery-scroll/

Ответ 8

Вы можете попробовать этот CSS. Возможно, это то, что вы ищете:

    html, body{
        text-align:center;
        margin:0px;
        background:#ABCFFF;
        height:100%;
        }
    .header-cont {
        width:100%;
        position:fixed;
        top:0px;
    }
    #header {
        height:50px;
        background:#F0F0F0;
        border:1px solid #CCC;
        width: 100%;
        margin:auto;
    }
    .content-cont {
        width:100%;
        position:absolute; /* to place it somewhere on the screen */
        top:60px;
        bottom:60px; /* makes it lock to the bottom */
        overflow:auto;
    }
    #content {
        background:#F0F0F0;
        border:1px solid #CCC;
        width:960px;
        position:relative;  
        min-height:99.6%;
        height:auto;
        overflow: hidden;
        margin:auto;            
    }
    .footer-cont {
        width:100%;
        position:fixed;
        bottom:0px;
    }
    #footer {
        height:50px;
        background:#F0F0F0;
        border:1px solid #CCC;
        width: 100%;
        margin:auto;
    }

Ответ 9

в этом модифицированном примере banner div остается на экране при прокрутке и также остается в контейнере div. когда контейнер divs bottom достигает вершины экрана, div баннера возвращается в относительное положение и прокручивается вверх с контейнером http://jsfiddle.net/SeeTS/198/

JQuery

$(window).scroll(function() {
t = $('.form').offset();
t = t.top;
s = $(window).scrollTop();
d = t-s;
b = $('.banner').height();
f = $('.form').height();

if (d < 5) {
    if(d < -(f-b)-15)
        {
        $('.banner').addClass('bottom');
        $('.banner').removeClass('fixed');
        }
    else {
        $('.banner').addClass('fixed');
        $('.banner').removeClass('bottom');
    }
}
else {
    $('.banner').removeClass('fixed');

}
});

CSS

    .form {
    position:relative;
    width:480px;
    margin: 100px auto;
    padding:10px;
}
p {
  border:2px dotted #000;
}
.banner {
    border-radius:8px;
    background:#660000;
    height:100px;
    width:60px;
}
.fixed{
    position:fixed;
    top:5px;
}
.bottom {
  position:absolute;
  bottom:0px;
}

HTML

<table class="form" id="form">
  <tr>
    <td valign="top" width="70px">
      <div class="banner"></div>
    </td>
    <td>
    <p>Cum sociis natoque penatibus...</p>
    </td>
  </tr>
</table>
<div style="position:relative;height:500px;">
</div>