Хитрый position: fixed

Nushaba · May 29, 2011

Привет. Стоит задача разобраться, реализовать нечто подобное как у яндекс-музыки: http://music.yandex.ru/

Дизайн сайта представляет 4 блока:

1. верхний - шапка 233px;

2. меню под шапкой 30px;

3. контент height:100%;

4. подвал height:50px;

Надо сделать div блок под меню сайта с фиксированным позиционированием, но что бы он прокручивался до top:0px; и в топе фиксировался при дальнейшей прокрутке (position:fixed;), а в случае если страничку прокручивают обратно вверх, то меню сдвигалось с поправкой на шапку, что то вроде (position:absolute; top:233px;) Всю голову сломал, выручите, кто в теме... Не обязательно так изворачиваться, возможно есть выход альтернативный, по типу min-height, благодарен за любую идею. Вероятно есть решение на js, но я увы не силён в этом.

Int · May 29, 2011

В пятницу такое делал. Сделал Мне ещё помогал волкер.

тебе нужно использовать document.documentElement.scrollTop, или, для других браузеров, document.body.scrollTop

Как только scrollTop становится больше, чем element.style.top (если он указан яваскриптом, а если нет, то там как-то хитро нужно, через document.defaultView.getComputedStyle), то или увеличиваешь элементу style.top или делаешь его fixed, на выбор.

psywalker · May 29, 2011

В пятницу такое делал. Сделал Мне ещё помогал волкер.
тебе нужно использовать document.documentElement.scrollTop, или, для других браузеров, document.body.scrollTop
Как только scrollTop становится больше, чем element.style.top (если он указан яваскриптом, а если нет, то там как-то хитро нужно, через document.defaultView.getComputedStyle), то или увеличиваешь элементу style.top или делаешь его fixed, на выбор.

Да мы уже почти списались с человеком, думаю, что справимся

Nushaba · May 29, 2011

Ну да, почти ) Спасибо, завтра покурю мануалы в инете по document.body.scrollTop. Напишу что получится.

psywalker, спасибо что отозвался, пока что не буду время у тебя отнимать, попробую сам разобраться, если что, можно к тебе обратиться?

psywalker · May 29, 2011

Ну да, почти ) Спасибо, завтра покурю мануалы в инете по document.body.scrollTop. Напишу что получится.
psywalker, спасибо что отозвался, пока что не буду время у тебя отнимать, попробую сам разобраться, если что, можно к тебе обратиться?

Да мне и не жалко было помочь-то, и время как раз появилось свободное, так что обращайся конечно же

Nushaba · May 30, 2011

В пятницу такое делал. Сделал Мне ещё помогал волкер.
тебе нужно использовать document.documentElement.scrollTop, или, для других браузеров, document.body.scrollTop
Как только scrollTop становится больше, чем element.style.top (если он указан яваскриптом, а если нет, то там как-то хитро нужно, через document.defaultView.getComputedStyle), то или увеличиваешь элементу style.top или делаешь его fixed, на выбор.

Можешь скинуть свой пример как ты реализовал меню? Мне в принципе хватит одного js кода думаю.

psywalker · May 30, 2011

В пятницу такое делал. Сделал Мне ещё помогал волкер.
тебе нужно использовать document.documentElement.scrollTop, или, для других браузеров, document.body.scrollTop
Как только scrollTop становится больше, чем element.style.top (если он указан яваскриптом, а если нет, то там как-то хитро нужно, через document.defaultView.getComputedStyle), то или увеличиваешь элементу style.top или делаешь его fixed, на выбор.
Можешь скинуть свой пример как ты реализовал меню? Мне в принципе хватит одного js кода думаю.

Блин, ну ты даёшь, я ж тебе говорил, чтобы ко-мне обратился

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 4</title>
<style type="text/css">
	* { margin: 0; padding: 0;}
	body {}
	.header { height: 200px; background: blue;}
	#menu { 
		width: 200px; 
		height: 200px; 
		background: red;
		position: absolute;
		top: 200px;
		left: 20px;
	}

</style>
</head>

<body>
	<div class="header"></div>
	<div id="menu">

	</div>	
	<div class="content">
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	</div>
<script type="text/javascript">

	var menu = document.getElementById('menu');
	window.onscroll = function(){
		var scroll = document.documentElement.scrollTop || document.body.scrollTop;
		if(scroll >= 200){
			menu.style.top = scroll + 'px';
		}else {
			menu.style.top = 200 + 'px';
		}

	}

</script>
</body>

</html>

Int · May 30, 2011

У меня примерно так же, только я навесил на таймер ) Зря наверное.

Nushaba · May 31, 2011

psywalker, видимо я сильно скромный по натуре ) Просто не хотел лишний раз дёргать. Спасибо, буду разбираться сегодня.

Вопрос мучает, заметил что на форуме быстро отвечают, даже не ожидал, но какая цель? Неужели ради идеи?

Int · May 31, 2011

Нет, что ты. У нас тайная секта. Мы специально дезинформируем посетителей, давая на первый взгляд правильные, но в дальнейшем создающие проблемы ответы. Так мы устраняем конкурентов.

Nushaba · May 31, 2011

Это не серьёзно как то )

psywalker, разобрался, спасибо за скрипт, осталось только пофиксить дрожания при прокрутке.

http://www.artlebedev.ru/tools/technogrette/html/fixed_in_msie/

Edited May 31, 2011 by Nushaba

psywalker · May 31, 2011

Вопрос мучает, заметил что на форуме быстро отвечают, даже не ожидал, но какая цель? Неужели ради идеи?

Ну не знаю, мне лично например просто в кайф помогать другим, и делая это - учусь сам

Это не серьёзно как то )
psywalker, разобрался, спасибо за скрипт, осталось только пофиксить дрожания при прокрутке.
http://www.artlebedev.ru/tools/technogrette/html/fixed_in_msie/

Да там ерунда вроде. Тупо фон поставь левый.

Nushaba · June 13, 2011

Привет всем ещё раз. Переделал немного скрипт, что бы лучше работал. Суть в том, что с абсолютным позиционированием невозможно избавиться от дрожания при прокрутке страницы, в связи с чем я добавил функцию menu.style.position = 'fixed';. В общем выглядит это примерно так:

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 4</title>
<style type="text/css">
	* { margin: 0; padding: 0;}
	body {}
	.header { height: 200px; background: blue;}
	#menu {
		width: 200px;
		height: 200px;
		background: red;
		position: absolute;
		top: 200px;
		left: 20px;
	}
</style>
</head>
<body>
	<div class="header"></div>
	<div id="menu">
	</div>
	<div class="content">
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	</div>
<script type="text/javascript">
	var menu = document.getElementById('menu');
	window.onscroll = function(){
		var scroll = document.documentElement.scrollTop || document.body.scrollTop;
		if(scroll >= 200){
			menu.style.position = 'fixed';
			menu.style.top = 0 + 'px';
		}else {
			if(scroll < 200){
			menu.style.position = 'absolute';
			menu.style.top = 200 + 'px';
			}
		}
	}
</script>
</body>
</html>

psywalker, спасибо за код, даже лучше в js стал разбираться, благодаря твоему примеру. Один момент немаловажный: есть вероятность, что какая то функция в скрипте лишняя ) Ну в общем то я и говорил что я не знаю js программирования, но на мой взгляд всё работает и выкинуть больше нечего из скрипта.

psywalker · June 13, 2011

psywalker, спасибо за код, даже лучше в js стал разбираться, благодаря твоему примеру. Один момент немаловажный: есть вероятность, что какая то функция в скрипте лишняя )

Дело в том, что в скрипте всего ОДНА функция, и если она лишняя, то извини.

Ну в общем то я и говорил что я не знаю js программирования

Вот это уже ближе к правде.

Nushaba · June 13, 2011

Я имел в виду что в моём варианте возможно есть лишняя функция какая то, а не в твоём. У тебя всё чисто, но есть подёргивания блока при прокрутке, из-за выбранного метода позиционирования блока, но это всё равно было основой, без которой я бы парился фиг знает сколько. А вообще изначально у меня была мысль подложить один блок с фиксированным позиционированием по другой с абсолютным позиционированием, используя z-index, но это смотрелось бы приторно ) В общем то js даёт реальные возможности для новых дизайнов, буду теперь изучать его. Всё равно ребят, у вас хороший форум, как блог свой закончу, ссылку обязательно сделаю на вас.

Edited June 13, 2011 by Nushaba

andi25 · March 22, 2012

подскажите пожалуйста а как прижать к низу сайта?

попробовал поменять все top на bottom но не работает(

	<script type="text/javascript">
        var menu = document.getElementById('menu');
        window.onscroll = function(){
                var scroll = document.documentElement.scrollBottom || document.body.scrollBottom;
                if(scroll >= 200){
                        menu.style.position = 'fixed';
                        menu.style.bottom = 0 + 'px';
                }else {
                        if(scroll < 200){
                        menu.style.position = 'absolute';
                        menu.style.bottom = 200 + 'px';
                        }
                }
        }
</script>

Nushaba · March 22, 2012

andi25, способов несколько, объясни поподробнее что надо сделать, я так понял ты хочешь что бы не ниже какого то пикселя опускался блок? Лучше конечно увидеть где ты хочешь это применить, что бы понять что там за задумка.

andi25 · March 22, 2012

у меня есть блок прижатый к низу страницы position: fixed; bottom:0;

мне надо чтоб внизу браузера он остановился на bottom:135px

andi25 · March 22, 2012

вы меня поняли?)

Switch74 · March 23, 2012

у тебя единственное лишнее это


if(scroll < 200)

else уже указывает о всех остальных значениях не равных >=200

я делал именно таким же способом, но способ psywalker при не большой доработки можно превратить в плавно догоняющую менюшку, как на не которых сайтах.

чтобы твой скрипт работал для меню в footere нужно добавить:

1. узнать ('высоту всей страницы'-135px-'высота клиентской области браузера') это 'граница scroll' при которой будет смена absolute на fixed

2.


if(scroll < 'граница scroll'){
   menu.style.position = 'fixed';
   menu.style.bottom = '0px';
}else{
   menu.style.position = 'absolute';
   menu.style.bottom = '135px';
}

интересно было бы объединить оба скрипта для обоих меню и верхнего и нижнего

andi25 · March 23, 2012

Спасибо, но ведь высота у всех страниц разная

Switch74 · March 23, 2012

ну да

если нормально сверстана страница, то высоту страницы легко можно определить по высоте body или wraper

высоту экрана браузера можно определить например этой функцией


function getOffsetScreen()
{
	var wwidth=(window.innerWidth) ? window.innerWidth : ((document.all) ? document.body.offsetWidth : null); 
	var wheight=(window.innerHeight) ? window.innerHeight : ((document.all) ? document.body.offsetHeight : null);
	return {'width':wwidth,'height':wheight};
}

andi25 · March 23, 2012

в моем случай лучше определить высоту из #wrapper

но я в js пока что ничего не понимаю..(

<script type="text/javascript">

function getOffsetScreen()
{
        var wwidth=(window.innerWidth) ? window.innerWidth : ((document.all) ? document.body.offsetWidth : null); 
        var wheight=(window.innerHeight) ? window.innerHeight : ((document.all) ? document.body.offsetHeight : null);
        return {'width':wwidth,'height':wheight};
}

</script>
 <script type="text/javascript">

      var menu = document.getElementById('menu');
        window.onscroll = function(){
                var scroll = document.documentElement.scrollTop || document.body.scrollTop;
if(scroll < document.body.offsetHeight){
   menu.style.position = 'fixed';
   menu.style.bottom = '0px';
}else{
   menu.style.position = 'absolute';
   menu.style.bottom = '135px';
}
        }

</script>

помогите пожалуйста

Nushaba · March 23, 2012

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

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 4</title>
<style type="text/css">
	* { margin: 0; padding: 0;}
	.footer { height: 200px; background: blue; position: relative;}
	#menu {
                width: 200px;
                height: 200px;
                background: red;
                position: fixed;
                bottom: 0px;
                left: 20px;
        }
</style>
</head>
<body>
<div class="content">
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="footer">

<div id="menu">
</div>

</div>
<script type="text/javascript">
        var menu = document.getElementById('menu');
        window.onscroll = function(){
                var scroll = document.documentElement.scrollTop || document.body.scrollTop;
                if(scroll >= -1000 + document.body.offsetHeight){
                        menu.style.position = 'absolute';
                        menu.style.bottom = 200 + 'px';
                }else {
                        if(scroll < -1000 + document.body.offsetHeight){
                        menu.style.position = 'fixed';
                        menu.style.bottom = 0 + 'px';
                        }
                }
        }
</script>

</body>
</html>

Кое что ясно, разные браузеры определяют разное количество пикселей через функцию document.body.offsetHeight

Её надо заменять аналогом...

В общем всю голову сломал, нужно работать с функцией: offsetHeight, но в силу моего малого знания js я не могу это осилить пока что, может кто сможет доработать, косяк с использованием параметра document.body.offsetHeight, так как разные браузеры показывают разную цифру, нужно определять высоту блока <div class="content">, а не тега <body>, возможно тут не будет проблем с определением пикселей.

Edited March 23, 2012 by Nushaba

Lacosta · June 20, 2013

В пятницу такое делал. Сделал Мне ещё помогал волкер.
тебе нужно использовать document.documentElement.scrollTop, или, для других браузеров, document.body.scrollTop
Как только scrollTop становится больше, чем element.style.top (если он указан яваскриптом, а если нет, то там как-то хитро нужно, через document.defaultView.getComputedStyle), то или увеличиваешь элементу style.top или делаешь его fixed, на выбор.
Можешь скинуть свой пример как ты реализовал меню? Мне в принципе хватит одного js кода думаю.
Блин, ну ты даёшь, я ж тебе говорил, чтобы ко-мне обратился
CODE....
Псиволкел, ребята, привет всем.
Я по примеру сделал в общем у себя.
Вроде работает, но с багом (или фитчей), при загрузке страницы, блок menu (у меня другой ид), приклеивается к потолку. И только если двинуть ползунком даже на миллиметр - занимает своё место (прыгает вниз, на обозначенные в стилях координаты) и всё становится нормальным. То есть сам эффект норм - при прокрутке становится вверху и остаётся. Как побороть приклеивание при загрузке?

Edited June 20, 2013 by Lacosta

Nushaba · June 21, 2013

Псиволкел, ребята, привет всем.
Я по примеру сделал в общем у себя.
Вроде работает, но с багом (или фитчей), при загрузке страницы, блок menu (у меня другой ид), приклеивается к потолку. И только если двинуть ползунком даже на миллиметр - занимает своё место (прыгает вниз, на обозначенные в стилях координаты) и всё становится нормальным. То есть сам эффект норм - при прокрутке становится вверху и остаётся. Как побороть приклеивание при загрузке?

Привет. Покажи страницу и в каком браузере глюк такой. Вероятно где то в скрипте напортачил ты.

Sign In

Хитрый position: fixed

Question

Link to comment

Share on other sites

32 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information