при достижении top:0 блок фиксируется и

@полудух · Регистрация: 15.03.2016

Author24 — интернет-сервис помощи студентам

добрый день
есть такая задача у меня, которая разбивается на 2 составляющих:
1. div на всю ширину, когда достигает верха, то фиксируется на месте
2. весь остальной контент уезжает ПОД этот блок. Точне ДО этого блока наверное... Сам блок полу-прозрачный, это меню с прорезями, за которым бэк видно частично, поэтому контент не должен быть виден

в общем, 1ю задачу порешал как-то так
в принципе, работает, при достижении top:0 присваивается :fixed и прочие свойства

а вот по 2й задаче вопрос - какие варианты? overflow только или как-то поизящней можно?
не хотелось бы полосу прокрутки вешать
с другой стороны, длина контента неизвестна, надо будет рассчитывать высоту экрана, чтобы правильной высоты блок ставить, в котором весь контент прокручивается?

а потом ещё нужно, когда контент кончается, чтобы футер прилипал к низу, тоже надо учитывать

Добавлено через 6 часов 57 минут
куда подевались все верстальщики то )

@Kraken73 · 16.03.2016, 17:27

как то так

HTML5

1 2	<div class="menu"></div> <div class="content"></div>

Javascript

$(document).ready(function(){  
         $(window).scroll(function(){
            if ( $(this).scrollTop() > 150 ){
                $('.menu').addClass("fixed");
             } else if($(this).scrollTop() <= 150 ) {
                 $('.menu').removeClass("fixed");
             }
         });//scroll
    });

CSS

.menu {
  width:100%;
  background:green;
  opacity:1;
  height:150px;
}
.fixed {
  position:fixed;
  opacity:0.8;
  top:0;
}
.content {
  height:2000px;
  background:red;
}

@полудух 209 / 191 / 49 Регистрация: 15.03.2016 Сообщений: 1,211
		1
	при достижении top:0 блок фиксируется и 15.03.2016, 23:13. Показов 1420. Ответов 1 Метки нет (Все метки) добрый день есть такая задача у меня, которая разбивается на 2 составляющих: 1. div на всю ширину, когда достигает верха, то фиксируется на месте 2. весь остальной контент уезжает ПОД этот блок. Точне ДО этого блока наверное... Сам блок полу-прозрачный, это меню с прорезями, за которым бэк видно частично, поэтому контент не должен быть виден в общем, 1ю задачу порешал как-то так в принципе, работает, при достижении top:0 присваивается :fixed и прочие свойства а вот по 2й задаче вопрос - какие варианты? overflow только или как-то поизящней можно? не хотелось бы полосу прокрутки вешать с другой стороны, длина контента неизвестна, надо будет рассчитывать высоту экрана, чтобы правильной высоты блок ставить, в котором весь контент прокручивается? а потом ещё нужно, когда контент кончается, чтобы футер прилипал к низу, тоже надо учитывать Добавлено через 6 часов 57 минут куда подевались все верстальщики то ) 0

	16.03.2016, 17:27

при достижении top:0 блок фиксируется и

Решение