Перовое задание на новой работе (hml+css) :(

Тема в разделе "Мегафлуд", создана пользователем maxim nestoff, 24 дек 2013.

  1. maxim nestoff

    maxim nestoff Создатель

    Регистр.:
    23 апр 2009
    Сообщения:
    182
    Симпатии:
    13
    Друзья, нужна ваша помощь. Устроился на работу админом сайта, а мне сразу первое задание на знание css:
    Сделать полу-прозрачность меню на главной странице
    Описание:
    При переходе на главную страницу agtplus.ua верхнее меню сайта должно быть полупрозрачное (позиция 1)
    При скроле вниз меню становится непрозрачным (так как сейчас на сайте, позиция 2)

    Уже второй день бьюсь, но не знанию как реализовать. Сайт
     

    Вложения:

    • poziciya1.png
      poziciya1.png
      Размер файла:
      1,9 МБ
      Просмотров:
      19
    • poziciya2.png
      poziciya2.png
      Размер файла:
      739,1 КБ
      Просмотров:
      18
  2. gres_18

    gres_18 Pythonобандерівець®

    Регистр.:
    26 апр 2009
    Сообщения:
    407
    Симпатии:
    206
    Второй день не можешь opacity сменить? :facepalm:Попробуй так:
    HTML:
    #gkTop{
        opacity: 0.8;
    }
    JS на прокрутку не буду тебе вешать, это тебе в другой раздел нужно. Успехов на новой работе)
     
    Последнее редактирование: 24 дек 2013
    maxim nestoff нравится это.
  3. maxim nestoff

    maxim nestoff Создатель

    Регистр.:
    23 апр 2009
    Сообщения:
    182
    Симпатии:
    13
    opacity я знаю как прописать. А как сделать чтоб при входе на главную меню сначала было полупрозрачное, а при прокрутке вниз стало непрозрачным (как сейчас).

    Я думал сделать еще одно меню, но в сайте есть моб версия, так что не катит.(
     
  4. gres_18

    gres_18 Pythonобандерівець®

    Регистр.:
    26 апр 2009
    Сообщения:
    407
    Симпатии:
    206
    В css пиши opacity 0.8, потом вешай обработчик на прокрутку страницы и с помощью js меняй opacity на 1.
     
    maxim nestoff нравится это.
  5. gres_18

    gres_18 Pythonобандерівець®

    Регистр.:
    26 апр 2009
    Сообщения:
    407
    Симпатии:
    206
    Локально проверил, работает:
    Сначала в css нужно поменять
    HTML:
    #gkTop.isIntro {
        top: -200px;
    }
    на
    HTML:
    #gkTop.isIntro {
    top: 0;
    opacity: 0.8;
    }
    Потом в gk.scripts.js заменить
    HTML:
    if(pos >= 100) {
    document.id('gkTop').setStyle('top', '0px');
    } else if(pos < 100) {
    document.id('gkTop').setStyle('top', '-100px');
    }
    на
    HTML:
    if(pos < 400) {
        document.id('gkTop').setStyle('opacity', '0.8');
    } else {
        document.id('gkTop').setStyle('opacity', '1');
    }
    где 400 - граница где будет сменяться прозрачность, можно поиграть и посмотреть где нужно делать меню непрозрачным.
     
    maxim nestoff нравится это.