it-swarm.com.ru

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

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

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

enter image description here

18
Rachel

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

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

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.

17
zzzzBov

Вам понадобится 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;
}
8
ptriek

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

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

3
Paolo

Предположим, что верхняя позиция (в верхней части экрана) 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 });
    }
});

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

3
zuo

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

Это работает так:

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

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

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

Вот jsfiddle , чтобы дать вам идею.

2
npas

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

0
jeff musk

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

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

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

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

#contentarea { margin-top: 35px; }

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

0
Didier Ghys

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

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

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

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

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

0
Chris

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