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

Question

У меня есть мастер-форма для моего сайта, и я хочу прикрепить div к верхней части области содержимого внутри мастер-формы.Этот div всегда должен быть видимым, несмотря на положение прокрутки.Возможно ли это?

Картинка объяснит это лучше.

Answer 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.

Answer 2

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

Редактировать

функция 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;
}

Answer 3

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

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

это реализовано с событием прокрутки.

Answer 4

Я создал новую скрипку, которая, я надеюсь, может быть полезной. 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}

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

Answer 5

По состоянию на июль 2018 года пришло время вернуться к этой проблеме.position: sticky был введен именно для таких задач, как ваша, и имеет достойную поддержку браузера .

Работает так:

<div style="position: sticky; top: 0;"> Header </div>

, где top - это расстояниена верхнюю часть окна просмотра должен оставаться элемент div при прокрутке. Указание top является обязательным. Другие параметры, такие как bottom, left или right do not , работают в настоящее время.

Sticky div будет действовать какобычный div во всех отношениях, за исключением случаев, когда вы прокручиваете его, а затем он прикрепляется к верхней части браузера.

Вот jsfiddle , чтобы дать вам представление.

Answer 6

в этом модифицированном примере баннер div остается на экране при прокрутке, а также остается в контейнере 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>

Answer 7

Вы можете попробовать этот 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;
    }

Answer 8

Я полагаю, что вы ищете 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/

Answer 9

Звучит так, будто вы ищете заголовок div с двумя свойствами:

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

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

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

Answer 10

Используйте CSS, чтобы исправить свою позицию.

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

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

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

#contentarea { margin-top: 35px; }

Проверьте это скрипка .