Если вкратце я делаю так:
// top_floating - id моего дива который и является всплывающим меню
// update_floating - функция которые высчитывает это все когда показывать.
$(document).ready(function() {
$('#top_floating').hide();
$(window).scroll(update_floating);
});
// link_pic04 - id элемента на страницы, при достижении скролла, выпадает или исчезает выпадающее меню
function update_floating() {
var $header = $('#link_pic04');
if ($(window).scrollTop() > $header.offset().top + $header.innerHeight() - 47) {
$('#top_floating').slideDown();
} else {
$('#top_floating').slideUp();
}
}
ну и соответствующие стили ещё у меню - position: fixed;
Так что вперед, пробуй ;)
Решение удалось применить такое:
JS такой:
$(document).ready(function () {
var $menu = $("#menu");
$(window).scroll(function () {
if ($(this).scrollTop() > 70 && $menu.hasClass("default")) {
$menu.fadeOut('fast', function () {
$(this).removeClass("default")
.addClass("fixed")
.fadeIn('fast');
});
} else if ($(this).scrollTop() <= 70 && $menu.hasClass("fixed")) {
$menu.fadeOut('fast', function () {
$(this).removeClass("fixed")
.addClass("default");
});
}
});
});
CSS такой:
#menu.default {
display: none;
}
#menu.fixed {
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
XSLT той части меню, которая преобразовывается после прокрутки страницы после 70px вниз такой:
<div id="menu" class="default header-yarus wrap">
<xsl:apply-templates select="document('udata://menu/draw/navisectorscroll')" mode="central_menu"/>
<form action="/search/search_do/" method="get" role="form">
<input type="text" placeholder="Ваш запрос" value="&search-default-text;" name="search_string" onblur="javascript: if(this.value == '') this.value = '&search-default-text;';" onfocus="javascript: if(this.value == '&search-default-text;') this.value = '';" x-webkit-speech="" speech="" class="scrolling" />
<button class="btn btn-primary btn-scroll" title="Найти" type="submit">
<xsl:text>&search;</xsl:text>
</button>
</form>
<xsl:apply-templates select="document('udata://emarket/cart')" mode="basket_scroll" />
</div>
примечание: у меня кроме меню ещё краткая информация о содержимом корзины и поисковая строка выводится.