Avatar
Majkl
Člen
Avatar
Majkl:

Ahoj, s Javascriptem jsem nový a narazil jsem na problém, chci udělat, že když scrolluju dolů, a #menu dojede na horní okraj obrazovky, zafixuje se nahoře, jenže když potom pojedu přes bílý článek, menu bude pomalu zanikat. Chtěl bych to vyřešit buď borderem nebo box-shadowem :-) , Nevíte jak by to mělo vypadat? (např. 'box-shadow':'2px 0 black')?

$(function(){

        fixMenu();
        fixAside();
        smoothScroll();
});

function fixMenu()
{
        var menu_place = $('#menu').offset().top;
        var menu = $('nav');

        $(window).scroll(function(){

                var scroll_top = $(window).scrollTop();

                if ( scroll_top > menu_place )
                        {
                                menu.css({ 'position': 'fixed', 'top':0,
                    'background': '#F5F5F5', 'right':0, 'left':0}); //Do tohoto řádku bych to rád dal
                        }
                else
                        {
                                menu.css({ 'position': 'relative' });
                        }
        });
}

function fixAside()
{
        var sticky = $('.sticky').offset().top;
        var menu = $('nav');

        $(window).scroll(function(){

                var scroll_top = $(window).scrollTop() + menu.height();

                if (sticky < scroll_top){
                        $('.sticky').css({ position: 'fixed', top: menu.height() });
                }
                else {
                        $('.sticky').css('position','static');
                }
        });
}
Odpovědět 1.3.2015 15:00
Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.
Avatar
Fredep
Redaktor
Avatar
Odpovídá na Majkl
Fredep:

Ahoj, do CSS vlastnosti box-shadow se nejprve zapíše horizontální a vertikální posun stínu, poté jeho dosah (rozmazání) a jeho začátek (jak daleko bude zasahovat plný stín). Nakonec napíšeš barvu. Pro přirozený stín vycentrovaný doprostřed tedy můžeš použít

box-shadow: 0 0 10px 0 gray;
menu.css({ 'position': 'fixed', 'top':0,
  'background': '#F5F5F5', 'right':0, 'left':0, 'box-shadow': '0 0 10px 0 gray'});
Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
Nahoru Odpovědět 1.3.2015 15:23
Týmová práce je důležitá proto, aby bylo možno obvinit z neúspěchu někoho jiného.
Avatar
Majkl
Člen
Avatar
Odpovídá na Fredep
Majkl:

Fredep opět všechno vyřešil, děkuji moc (Tu máš body a zkušenosti :-D :-D )

Nahoru Odpovědět  +1 1.3.2015 16:14
Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.