Я пытаюсь, чтобы подменю оставалось в верхней части страницы, прокручивая его, когда оно достигает вершины во время прокрутки. Вот что я имею до сих пор:
$(window).scroll(function () {
if ($(window).scrollTop() > 175) {
$('#location_menu').css('position', 'fixed').css('top','0px').css('z-index','1000');
$('.first').css('padding-top','415');}
else {
$('#location_menu').css('position', 'relative').css('z-index','1');
}});
Проблема, с которой я сталкиваюсь, заключается в том, что прокрутка не является гладкой и как только элемент изменяется с позиции: по отношению к позиции: исправлено содержимое, похоже, прыгает/пропускает около 415 пикселей, что соответствует высоте подменю.
Вот css:
<div id="location_menu" >submenu content
</div>
<div id="content" class="location_detail first">content beneath submenu
</div>
Я добавил строку для .first
чтобы иметь .first
верхнюю часть 415px, когда страница прокручивается и достигает в пределах 175px верхней части страницы .css('padding-top','415')
это на самом деле не похоже, что-то делают. Нет никаких изменений, поэтому я предполагаю, что я выполнил его неправильно.
Должен ли я использовать другую функцию прокрутки, я перечислил выше?
Вот что я в конечном итоге использовал, чтобы исправить мою проблему, основываясь на коде из @Danko:
$(window).scroll(function () {
var $conten = $('.first'),
$menu = $('#location_menu')
scrollpos = $(window).scrollTop();
if (scrollpos >= 175) {
$conten.css('padding-top','365px');
$menu.css('position', 'fixed').css('top','0px').css('z-index','1000');
} else {
$conten.css('padding-top','0');
$menu.css('position', 'fixed').css('position', 'relative').css('z-index','1');
}
});
редактировать
Хорошо, теперь, когда я понимаю вопрос, я сделал это демо http://codepen.io/anon/pen/BdkLf.
Фактически эта функция:
$(window).scroll(function () {
var $menu = $('#location_menu'),
$conten = $('#content'),
scrollpos = $(window).scrollTop();
if (scrollpos >= 175) {
$menu.css( {
"top" : "0",
"position": "fixed",
});
$conten.css('top','375px' );
} else {
$menu.css( {
"position": "relative",
"top" : "175px",
});
$conten.css('top','175px');
}
});
Здесь 175
равен начальному расстоянию от вершины, а 375
- добавление между расстоянием и height
вашего меню