Search code examples
javascriptjqueryhtmlcssimage-resizing

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

I am creating a logo division for a website, however I can't seem to get this to work. I want the logo to shrink as you scroll down on the site and to regain its initial position when scroll up to top. I've tried a few javascript/jQuery functions but its not working. This is the current function i've played with and it doesn't seem to like it. How do I fix it?

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;
}
Solution

  • You seem to miss a semicolon in your CSS:

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

    Otherwise it seems to work as it should, check this fiddle