Плавающее меню

@Fedor92 · Регистрация: 15.12.2012

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

Доброго времени суток, уважаемые форумчане! В моём распоряжении есть следующий код прокрутки плавающего меню:

Кликните здесь для просмотра всего текста

Javascript

$(function(){ 
    var topPos = $('.scroll').offset().top; 
    $(window).scroll(function() { 
    var top = $(document).scrollTop(), 
    down = $('.footer').offset().top, 
    height = $('.scroll').outerHeight(); 
    if (top > topPos && top <down) {$('.scroll').addClass('fixed').removeAttr("style");} 
    else if (top > pip) {$('.scroll').removeClass('fixed').css({'position':'absolute','bottom':'0'});} 
    else {$('.scroll').removeClass('fixed')} 
    }); 
    });

Передо мной стоит 2 задачи: оптимизировать его таким образом, чтобы при загрузке страницы меню располагалось посередине окна браузера... И 2 задача убирать меню при разрешении экрана меньше либо равному 1024px... Первую задачу пытался решить с помощью css, но в итоге получилось так, что меню начинало скакать вместо того, чтобы плавно прокручиваться... Для решения второй задачи написал код:

Кликните здесь для просмотра всего текста

Javascript

window.onresize = function(){ 
var Win = window.screen.availWidth; 
if (Win = 1024){$('.scroll').removeClass('fixed').css({'display':'none'});} 
});

, но дело в том что меню пропадает только при загрузке страницы, а при скролле снова появляется... Поэтому прошу Вашего совета и помощи: как мне допилить код, чтобы решить эти задачи?

@Lazy_Den · 29.09.2014, 05:58

Пример смотрим тут. Вторая ваша задача - решается с помощью медиа-запроса. В примере, я поставил значение 400px, т.к. размер фрейма в песочнице небольшой, а вы поставите то, которое считаете нужным.

Javascript

var myNav = $('#my_nav'),
    posTop = myNav.offset().top - myNav.outerHeight() / 2;
 
myNav.css({
    marginTop: - myNav.height() / 2,
    marginLeft: - myNav.width() / 2,
});
 
$(window).on('scroll', function(){
    myNav[($(this).scrollTop() >= posTop ? 'addClass' : 'removeClass')]('fixed');
});

CSS

#my_nav {
    position: absolute;
    top: 50%;
    left: 50%;
}
#my_nav.fixed {
    position: fixed;
    margin-top: 0 !important;
    top: 0;
}
#my_nav ul {
    list-style: none;
}
#my_nav ul li {
    display: inline-block;
}
@media screen and (max-width: 400px) { /* Изменить на своё значение */
     #my_nav {
         display: none;
    }
}

	29.09.2014, 05:58