Question

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    
    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
    }
    
    #navbar {
      overflow: hidden;
      background-color: #f1f1f1;
      padding: 80px 10px;
      transition: 0.9s;
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 99;
    }
    
    #navbar a {
      float: left;
      color: black;
      text-align: center;
      padding: 12px;
      text-decoration: none;
      font-size: 18px; 
      line-height: 25px;
      border-radius: 4px;
    }
    
    #navbar #logo {
      /*font-size: 35px;
      font-weight: bold;*/
      transition: 0.4s;
      height:20px;
      
    }
    
    #navbar a:hover {
      background-color: #ddd;
      color: black;
    }
    
    #navbar a.active {
      background-color: dodgerblue;
      color: white;
    }
    
    #navbar-right {
      float: right;
    }
    
    @media screen and (max-width: 580px) {
      #navbar {
        padding: 20px 10px !important;
      }
      #navbar a {
        float: none;
        display: block;
        text-align: left;
      }
      #navbar-right {
        float: none;
      }
    }
    </style>
    </head>
    <body>
    
    <div id="navbar">
      <a href="#default" id="logo"><img src="indexmain.jpg"></a>
      <div id="navbar-right">
        <a class="active" href="#home">Home</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
      </div>
    </div>
    
    <div style="margin-top:210px;padding:15px 15px 2500px;font-size:30px">
     
    </div>
    
    <script>
    // When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
    window.onscroll = function() {scrollFunction()};
    
    function scrollFunction() {
      if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
        document.getElementById("navbar").style.padding = "20px 20px";
        document.getElementById("logo").style.fontSize = "25px";
      } else {
        document.getElementById("navbar").style.padding = "80px 10px";
        document.getElementById("logo").style.fontSize = "35px";
      }
    }
    </script>
    
    </body>
    </html>

在这里，当我向下滚动图片时，尺寸会发生变化，但是该图片或徽标的位置不正确，因此我应该在代码或CSS中更改徽标位置应放在适当的位置。作为参考，我上传了问题的ss。在其中您会发现徽标位于底部，因此如何正确放置该徽标。

Answer 1

HTML

<div id="header_nav" class="header">
    <div class="logo"></div>
</div>

CSS

body {
    height:1000px;
    width:100%;
    background-color:#eee;
}
.header {
    width:100%;
    height:100px;
    background: #26b;
    color: #000;
    position:fixed;
    top:0;
    left:0;
    transition: height 500ms, background 500ms;
}
.logo {
    background: url("http://placehold.it/100x100") no-repeat;
    width: 100px;
    height: 100px;
    transition: all 0.4s ease-in-out 0s;
}
.header.tiny {
    height:40px;
    background: #aaa;
    color: #fff;
}
.tiny .logo {
    background: url("http://placehold.it/40x40") no-repeat !important;
    width: 40px !important;
    height: 40px !important;
    transition: all 0.4s ease-in-out 0s;
}

JAVASCRIPT / JQUERY

$(window).scroll(function () {
    if ($(document).scrollTop() == 0) {
        $('#header_nav').removeClass('tiny');
    } else {
        $('#header_nav').addClass('tiny');
    }
});

向下滚动时如何调整图像或徽标的大小

1 个答案: