Необходимо уменьшить изображение логотипа внутри подразделения, прокручивая страницу вниз. - PullRequest
Новая
       42

Необходимо уменьшить изображение логотипа внутри подразделения, прокручивая страницу вниз.

0 голосов
/ 16 ноября 2018

Я создаю раздел логотипа для веб-сайта, но, похоже, не могу заставить его работать. Я хочу, чтобы логотип уменьшался при прокрутке вниз по сайту и восстанавливал исходное положение при прокрутке вверх. Я пробовал несколько функций javascript / jQuery, но они не работают. Это текущая функция, с которой я играл, и она мне не нравится. Как мне это исправить?

HTML 

<body>
    <script type="text/javascript">
        $(document).on('scroll', function() {
            if ($(document).scrollTop() >= 10) {
                $('.logo1 img').css('width', '50px');
            } else {
                $('.logo1 img').css('width', '');
            }
        });
    </script>

    <div id="layout">
        <header id="header" class="header-v1">
            <nav class="flat-mega-menu">
                <ul class="collapse">
                    <li class="title">
                        <div class="nav1">
                            <div class="logo1">
                                <a href="index.html">
                                    <img src="img/weblogo.png" alt="">
                                </a>
                            </div>
                        </div>
                    </li>
                    <li><a href="index.html">HOME</a></li>
                    <li> <a href="template-about-2.html">ABOUT US</a></li>
                </ul>
            </nav>
        </header>
    </div>
</body>

CSS: 

.nav1 {
  position: fixed top: 0;
  z-index: 1;
  width: 100%;
}
.nav1 .logo1 {
  position: fixed;
  text-align: left;
  z-index: 2;
  top: 0;
  overflow: hidden;
}

1 Ответ

0 голосов
/ 16 ноября 2018

Вы, кажется, пропустили точку с запятой в своем CSS: 

.nav1 {
  position: fixed; <-- here
  top: 0;
  z-index: 1;
  width: 100%;
}

В противном случае, похоже, все работает как надо, отметьте эту скрипку

...