Question

我正在为网站创建徽标部门，但是似乎无法正常工作。我希望徽标在您向下滚动网站时缩小，并在向上滚动至顶部时恢复其初始位置。我已经尝试了一些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;
}

Answer 1

您似乎错过了CSS中的分号：

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

否则，它似乎可以正常工作，请检查this fiddle

向下滚动页面时需要在部门内缩小徽标图像

1 个答案: