Jquery с плавающим меню в зависимости от размера окна - PullRequest
Новая
       36

Jquery с плавающим меню в зависимости от размера окна

1 голос
/ 21 июля 2011

У меня проблема с плавающим меню jquery. Ну, это работает отлично. Но когда размер окна браузера изменяется, возникает проблема. Когда окна достаточно велики, они прекрасно прокручиваются / скользят, но я хочу, чтобы они скользили в маленьком окне, если количество прокрутки и «верхняя» сумма не превышают высоту окна. Потому что теперь, если размер окна слишком мал, меню перемещается в невидимой области, например в 1024x768.

Вот мой код: 

$float_speed=1500; //milliseconds
$float_easing="easeOutQuint";
$menu_fade_speed=500; //milliseconds
$closed_menu_opacity=0.75;


$fl_menu=$("#float_menu_left");
$fl_menu_menu=$("#fl_menu .menu");
$fl_menu_label=$("#fl_menu .label");

$(window).load(function() {
menuPosition=$('#float_menu_left').position().top;
FloatMenu();
$fl_menu.hover(
    function(){ //mouse over
        $fl_menu_label.fadeTo($menu_fade_speed, 1);
        $fl_menu_menu.fadeIn($menu_fade_speed);
    },
    function(){ //mouse out
        $fl_menu_label.fadeTo($menu_fade_speed, $closed_menu_opacity);
        $fl_menu_menu.fadeOut($menu_fade_speed);
    }
    );
});

$(window).scroll(function () {
FloatMenu();
});

    function FloatMenu(){
var scrollAmount=$(document).scrollTop();
var topAmount = $("#float_menu_left").css("top");
var newPosition=menuPosition+scrollAmount;
if($(window).height()<$fl_menu.height()+scrollAmount){
    $fl_menu.css("top",menuPosition);
} else {
    $fl_menu.stop().animate({top: newPosition}, $float_speed, $float_easing);
}
}

Последняя функция важна и создает проблемы. Особенно эта часть: 

if($(window).height()<$fl_menu.height()+scrollAmount){
    $fl_menu.css("top",menuPosition);
} else {
    $fl_menu.stop().animate({top: newPosition}, $float_speed, $float_easing);
}

Надеюсь, вы мне поможете, я очень старался, поверьте мне.

С наилучшими пожеланиями

...