Форум Сайтостроение Веб-строительство

Скрыть блок только css

D
На сайте с 28.06.2008
Offline
1113
Dram
957

Есть два дива

<div class="top">...</div>
<div id="menu">...</div>

Задача используя только css сделать так чтобы <div id="menu"> при прокрутке вниз прилипал к верхней границе экрана.

Используя позицион фиксед у меня пока получилось фиксировать блок <div id="menu"> в том положении котором он есть сейчас - т.е. с отступом от верха ибо там <div class="top">

Можно ли используя только css скрывать блок <div class="top"> в дисплей ноу при прокрутке вниз?

Или может быть можно <div id="menu"> прилепить к верху когда до него доходит прокрутка?

В общем осуществить задуманное пока мешает <div class="top"> он не дает подняться блоку меню к верху экрана, как это обойти только на css ?

jpg 160156.jpg
Joker-jar
На сайте с 26.08.2010
Offline
167
Joker-jar
#1

Скроллится вся страница или внутри блока?

D
На сайте с 28.06.2008
Offline
1113
Dram
#2

ВСя страница

SocFishing
На сайте с 26.09.2013
Offline
118
SocFishing
#3
#menu {
top: 0;
bottom:0;
position:fixed;
overflow-y:scroll;
}

Может все же подключить JQ?

$(function(){
$(window).scroll(function() {
if ($(this).scrollTop() >= 290) {
$('#menu').addClass('menu');
}
else {
$('#menu').removeClass('menu');
}
});
});
★Сервис идентифицирует (https://socfishing.com/?utm_source=searchengines) посетителей вашего сайта и предоставляет их профили ВКонтакте, Телефон, Почта! Цены копеечные, работаем 8 лет.
Б
На сайте с 18.11.2012
Offline
131
Барышников
#4

#menu {
top: 0;
bottom:0;
position:fixed;
overflow-y:scroll;
}

У меня работает без последней строчки. Но всегда добавляю top:3px; left:5px; - в расчете на корявый браузер (экран).

копирайтинг по технике, аудит, курсы SEO
D
На сайте с 28.06.2008
Offline
1113
Dram
#5

При /* bottom: 0; пропадает все содержимое страницы в никуда, остается только див меню

Но к сожалению /* top: 0; */ приклеивает блок меню к верху закрывая <div class="top">...</div>

Мне нужно чтобы при прокрутке вверх <div id="menu">...</div> оставался приклееным к верху но как только он коснется <div class="top">...</div> то выше уже не лез.

Как вставить текст на Вставка видео на сайт, <div> вложенный в <a>
LH
На сайте с 26.09.2013
Offline
89
Leonid H
#6
Можно ли используя только css скрывать блок <div class="top"> в дисплей ноу при прокрутке вниз?

Нет. Скролл отслеживается только через js.

mendel
На сайте с 06.03.2008
Offline
232
mendel
#7
Leonid H:
Нет. Скролл отслеживается только через js.

Ну есть атрибут скролТоп, но он числовой, и в цсс проверять "больше чем ххх" не придумывается. Но может в новых спеках каких есть чего.

Шутку любишь над Фомой, так люби и над собой. (с) народ. Бесплатные списки читабельных(!) свободных доменов (http://burzhu.net/showthread.php?t=2976) (5L.com) Сайты, All inclusive. 5* (/ru/forum/962215)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий