Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.03.2013, 11:45
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Фикцация элемента в контейнере с прокруткой (локальный position:fixed)
Имеется контейнер с прокручиваемой областью, в нем элеменет:
<!DOCTYPE html>
<style>
    #container{
        position: relative;
        overflow: scroll;
        width: 200px;
        height: 200px;
    }
    #staff{
        width: 1000px;
        height: 1000px;
    }
    #element{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background: rgba(255, 0, 0, 0.4);
    }
</style>
<div id="container">
    <div id="element"></div>
    <div id="staff"></div>
</div>


Реально ли зафиксировать #element так, чтобы он не прокручивался, то есть вел себя примерно как position:fixed, но относительно не viewport'а, а контейнера? Вариант с прослушиванием onscroll не подходит, так как элемент будет дергаться.
Скроллбары должны быть именно у #container
Ответить с цитированием
  #2 (permalink)  
Старый 24.03.2013, 14:57
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

Вот здесь глянь-скролл подвигай
http://codepen.io/paulirish/pen/CgAof
Ответить с цитированием
  #3 (permalink)  
Старый 24.03.2013, 15:02
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Так position:fixed позиционируется относительно вьюпорта. А мне нужно относительно контейнера. Сама страница тоже может иметь скроллбары и сам контейнер может вообще уехать за пределы вьюпорта. Элементы с position:fixed не уедут вместе с контейнером, а так и останутся впределах вьюпорта.
Ответить с цитированием
  #4 (permalink)  
Старый 24.03.2013, 16:18
Аватар для zilker
Профессор
Отправить личное сообщение для zilker Посмотреть профиль Найти все сообщения от zilker
 
Регистрация: 30.07.2011
Сообщений: 189

Вряд ли получиться это сделать без наложения #element поверх #container
<!DOCTYPE html>
<style>
    #container{
        position: relative;
        overflow: scroll;
        width: 200px;
        height: 200px;
    }
    #hack {
        position: absolute;
    }
    #staff{
        width: 1000px;
        height: 1000px;
    }
    #element{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background: rgba(255, 0, 0, 0.4);
    }
</style>
<div id="hack">
    <div id="element"></div>
</div>
<div id="container">    
    <div id="staff"></div>
</div>
<script>
    var container = document.getElementById('container'),
        hack = document.getElementById('hack');
    hack.style.width  = container.clientWidth + 'px';
    hack.style.height = container.clientHeight + 'px';
    hack.style.left   = container.offsetLeft + 'px';
    hack.style.top    = container.offsetTop + 'px';
</script>


Сорри за оффтоп:
1. почему у меня в подписи появляется "code_5149b5065efd6" вместо "return caprion;", хотя при предпросмотре все нормально?
2. как при ответе сделать кнопку "Посмотреть" вверху кода, как у danik.js в этой теме?

Последний раз редактировалось zilker, 24.03.2013 в 16:36.
Ответить с цитированием
  #5 (permalink)  
Старый 24.03.2013, 16:30
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Не не, это не то. Я ведь говорил - скроллбары должны быть у контейнера. А теперь фактически они не у него, а у дочернего элемента (теперь контейнер - body)

2. Добавить атрибут run. Можно нажать кнопку Цитата у кого-нибудь и посмотреть как все размечено.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск