Question

Здравствуйте!

Хочу зафиксировать меню сайта что бы при прокрутке оно всегда было на виду.

Впринципе есть скрипт готовый и меню фиксируется но не по верх фотографий, при прокрутки сайта меню прячется под слайдером и под картинками на страницах с метериалом...

 

 <script type="text/javascript"> $(function(){ $(window).scroll(function() { var top = $(document).scrollTop(); if (top < 150) $("#catmenu").css({top: '0', position: 'relative'}); else $("#catmenu").css({top: '0', position: 'fixed'}); }); }); </script>

Вывод по верх всех обьектов сайта кодом 

 z-index: 100

скрипт перестает работать полностью и меню не фиксируется

Дизайн сайта особый (сложны видимо для меня) не смог сообразить как внедрить код.

Пришел за помощью к Вам.

 

Answer 1

Строку 73 в стилях:

#catmenu {line-height:58px;overflow:hidden;position:relative;padding:1px 20px 0;margin:0 0 40px;background:#313131 url(/.s/t/1101/nav.png) 0 0 repeat-x;}

заменить на:

#catmenu {width: 82.2%;position: fixed;line-height:58px;overflow:hidden;padding:1px 20px 0;margin:0 0 40px;background:#313131 url(/.s/t/1101/nav.png) 0 0 repeat-x;z-index: 10;}

после стили с блока промо:

<style>
.slider {
float:left;
/* Ширина слайдера */
width:1170px;
/* Высота слайдера */
height:350px;
position:relative;
padding-bottom:26px;
background:url(http://delaisait.ucoz.ru/img/1/1/dsslider/bottom_shadow.png) no-repeat bottom center;
}
.sliderContent {
float:left;
/* Ширина слайдера */
width:1170px;
/* Высота слайдера */
height:350px;
clear:both;
position:relative;
overflow:hidden;
}
.sliderArrows a {
display:block;
text-indent:-9999px;
outline:none;
z-index:50;
background-image:url(http://delaisait.ucoz.ru/img/1/1/dsslider/prev_next.png);
width:42px;
height:42px;
position:absolute;
top:50%;
margin-top:-34px;
}
.prev {
background-position:0 0;
left:15px;
}
.prev:hover {
background-position:0 -44px;
}
.next {
right:15px;
background-position:-44px 0;
}
.next:hover {
background-position:-44px -44px;
}
.sliderContent .item {
position:absolute;
/* Ширина слайдера */
width:1170px;
/* Высота слайдера */
height:350px;
background:#fff;
}
.sliderBullets {
position:absolute;
bottom:0;
left:50%;
z-index:50;
margin-left:-45px;
}
.sliderBullets a {
display:block;
float:left;
text-indent:-9999px;
outline:none;
margin-left:5px;
width:10px;
height:11px;
background:url(http://delaisait.ucoz.ru/img/1/1/dsslider/bullets.png) no-repeat;
}
.sliderBullets .active {
background-position:0 -11px;
}
.sliderContent a {
outline:none;
}
</style>

перенести в таблицу стилей конечно же без тегов <style></style> После стили:

.slider {
float:left;
/* Ширина слайдера */
width:1170px;
/* Высота слайдера */
height:350px;
position:relative;
padding-bottom:26px;
background:url(http://delaisait.ucoz.ru/img/1/1/dsslider/bottom_shadow.png) no-repeat bottom center;
}

заменить на следующие:

.slider {
float:left;
/* Ширина слайдера */
width:1170px;
/* Высота слайдера */
height:350px;
position:relative;
top:70px;
padding-bottom:26px;
background:url(http://delaisait.ucoz.ru/img/1/1/dsslider/bottom_shadow.png) no-repeat bottom center;
}

вот и все.

Comments

Все отлично встало! 

Спасибо!

Только теперь слайдер поломался немного, нет кнопок листать слайды и номера слайдов теперь по порядку цифрами слева под слайдером.

Все так же не работает меню в фотоальбоме и блоге

И на странице есть картинки они перекрывают меню 

http://nanoprofile.ru/index/informacija_po_ustanovke/0-6