向下滚动页面时需要缩小分区内的徽标图像

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

向下滚动页面时需要缩小分区内的徽标图像

Need to shrink logo image inside a division while scrolling down on a page

html

javascript

css

jquery

image-resizing