Jump to content
  • 0

Фиксировать положение элемента

ХОЛОДный

Asked by ХОЛОДный,

 Share

Question

ХОЛОДный Explorer

ХОЛОДный

Posted
Posted (edited)

Добрый день, допустим есть такой фрагмент:

<html>
	<body>
		<table id="first">
			<tr><td>CONTENT</td></tr>
		</table>
		<table id="second">
			 <tr><td>FIX ME</td></tr>
		</table>
	</body>
</html>

Страница загрузилась в браузер пользователя. Юзер начинает скроллить страницу вниз, table id="first" выходит из области видимости, а следующая за ней таблица с id="second" приближается в верхней границе экрана.

В этот момент я хочу зафиксировать таблицу с id="second". Чтоб как-бы далеко вниз пользователь не скроллил страницу, вторая таблица всегда будет уверхней границы.

Если же пользователь будт скроллить наверх, к началу страницы, я хочу, чтоб таблица с id="second" заняла своё первоначальное место.

Так вообще можно сделать? подскажите, пожалуйста.

Edited by ХОЛОДный
Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0
ХОЛОДный Explorer

ХОЛОДный

Posted
  • Author
Posted
Можно. JS в зубы и вперед!

position: fixed спасет отца русского программирования.

В том-то и прикол.

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

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

Видимо, еще что-то нужно знать, типа position:relative относительно верхнего края экрана. Или я неправильно думаю.

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted
В том-то и прикол.

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

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

Видимо, еще что-то нужно знать, типа position:relative относительно верхнего края экрана. Или я неправильно думаю.

Добавьте замену тега, удаляем TD и назначаем содержимое обернуться в ДИВ, и расположиться мимо таблицы ваще.

Link to comment
Share on other sites
  • 0
ХОЛОДный Explorer

ХОЛОДный

Posted
  • Author
Posted
Добавьте замену тега, удаляем TD и назначаем содержимое обернуться в ДИВ, и расположиться мимо таблицы ваще.

А зачем выкусывать содержимое таблицы, если сама таблица - полноценный контейнер, кроме того, она стоит из нескольких строк и столбцов.

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

А есть ли подобные примеры в сети, никак найти не могу. Проще же украсть чужое, чем самому велосипедить.

К сожалению, я нашел примитивные примеры с прилепливанием крайних контейнеров к краям экрана (типа антискроллящеся меню, чтоб всегда было на виду). Но мне то нужно часть верхушки страницы, а часть - прибить к верхнему краю.

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted (edited)
А зачем выкусывать содержимое таблицы, если сама таблица - полноценный контейнер, кроме того, она стоит из нескольких строк и столбцов.

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

А есть ли подобные примеры в сети, никак найти не могу. Проще же украсть чужое, чем самому велосипедить.

К сожалению, я нашел примитивные примеры с прилепливанием крайних контейнеров к краям экрана (типа антискроллящеся меню, чтоб всегда было на виду). Но мне то нужно часть верхушки страницы, а часть - прибить к верхнему краю.

просто потому что TD в таблице неразрывно связан со своим ближайшим окружением, что Вы и имели честь лицезреть. Вынимаете из потока TD - получите всю связку в придачу.

PS, кстати, в некоторых браузерах Вы ни за что не сможете назначить TD релейтив или еще что.

Edited by Justnewone
Link to comment
Share on other sites
  • 0
s0rr0w Explorer

s0rr0w

Posted
Posted
В том-то и прикол.

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

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

Видимо, еще что-то нужно знать, типа position:relative относительно верхнего края экрана. Или я неправильно думаю.

Чтобы не было отпрыгивания, на место прикрепляемой таблицы нужно вставить заглушку, которая будет равняться высоте таблицы.

Link to comment
Share on other sites
  • 0
ХОЛОДный Explorer

ХОЛОДный

Posted
  • Author
Posted
Чтобы не было отпрыгивания, на место прикрепляемой таблицы нужно вставить заглушку, которая будет равняться высоте таблицы.

http://www.granatny6.ru/plannings/

Понял, сейчас буду репетировать.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept