时间戳

首页 > 解决方案 > 在页面上向下滚动时需要缩小分区内的徽标图像

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

问题描述

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

标签： javascriptjqueryhtmlcssimage-resizing

解决方案

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

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

否则它似乎可以正常工作，检查这个小提琴

推荐阅读