滚动时缩小Logo

Question

简单地说，当我点击图像中的幻灯片时，我需要我的Logo缩小。

​

​

但我似乎无法让jQuery发挥作用。有人能告诉我如何缩小一些东西，如Logo看到上面的图像，而不影响选项卡是对的？我将能够编辑的大小，根据我的喜好，一旦我知道如何缩小标志。

以下是导航栏代码：

<nav class="navbar navbar-default navbar-fixed-top" style="opacity: 0.8;">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
        </button>
    <a class="logo" href="School%20Home.html"><img style="padding-left: 100px; height: 120px; width: 235px;" src="https://s24.postimg.org/o3c7li4mt/Screen_Shot_2017-04-18_at_8.15.25_AM.png" alt="Human Rights Council Homepage"></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li style="font-size: 12.5px;"><a href="About.html">ABOUT</a></li>
        <li style="font-size: 12.5px;"><a href="United%20Nations.html">UNITED NATIONS</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#" style="font-size: 12.5px;">HUMAN RIGHT VIOLATIONS IN MYANMAR
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" style="background-color: #0099ff; padding: 10px; width: 700px; height: 470px; color: white; box-shadow: 0 0 20px rgba(0,0,0,0.4);">

              <table style="width: 100%;">
                 <tr> 
                  <th style="border-right: 1px solid white; padding: 10px;"><strong><a href="Human%20Right%20Activists%20Criminals.html">Human Right Activists Criminals</a></strong></th>
                  <th style="border-left: 1px solid white; padding-left: 20px;"><strong>Human Right Activists are facing prison time in Myanmar due to their Efforts in stoping Human Right Violations.</strong></th>
                  </tr>

                  <tr> 
                      <th style="border-right: 1px solid white; border-top: 1px solid white; padding: 10px;"><strong><a href="Illegal%20Land%20Confiscations.html">Illegal Land Confiscations in Myanmar</a></strong></th>
                  <th style="border-left: 1px solid white; border-top: 1px solid white; padding-left: 20px;"><strong>Illegal Land Confiscations without proper compensation are leaving the citizens of Myanmar Homeless and with little resources.</strong></th>
                  </tr>
              </table>

          </ul>
        </li>
      <li style="font-size: 12.5px;"><a href="COMMING%20SOON.html">DONATE</a></li>
        </ul>
    </div>
  </div>
</nav>

导航栏的Css位于上面标签Style中的代码中。下面是CSS：

 body {
     padding-top: 13%;
     padding-right: 20px;
     padding-left: 10px;
 }   

.navbar {
    font-family: Montserrat, sans-serif;
}

.navbar {
    margin-bottom: 0;
    background-color: #fff;
    z-index: 9999;
    border: 0;
    font-size: 12px !important;
    line-height: 1.42857143 !important;
    letter-spacing: 4px;
    border-radius: 0;
    opacity: 0.9;
    padding-left: 10px;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-right: 10px;
}

.navbar li a, .navbar .navbar-brand {
    color: black!important;
}

.navbar-nav li a:hover, .navbar-nav li.active a {
    color: black!important;
    background-color: white!important;
}

.navbar-default .navbar-toggle {
    border-color: transparent;
    color: #fff!important;
}

/* Add a dark background color with a little bit see-through */ 
.navbar {
    margin-bottom: 0;
    background-color: #fff;
    height: 70px;
    border: 0;
    font-size: 11px !important;
    letter-spacing: 4px;
    opacity:0.9;

}

/* Controls normal color of nav bar */
.navbar li a, .navbar .navbar-brand { 
    color: black;
}

/* On hover, the links will turn black */
.navbar-nav li a:hover {
    color: blue;
}

/* The active link */
.navbar-nav li.active a {
    color: White!important;
    background-color:blue!important;
}

/* Remove border color from the collapsible button */
.navbar-default .navbar-toggle {
    border-color: transparent;
}

/* Dropdown */
.open .dropdown-toggle {
    color: #fff;
    background-color: #fff !important;
}

/* Dropdown links */
.dropdown-menu li a {
    color: #000000 !important;
    font-size: 15px;
}

/* On hover, the dropdown links will turn white */
.dropdown-menu li a:hover {
    background-color: white;
}

.dropdown-menu li a {
    width: 1000px;
    height: 100px;
    background-color: #0099ff;
}

我还使用了许多定义导航栏外观的样式表：

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="animate.css">
<link rel="stylesheet" href="shrink.js">

以下是我的Jquery：

function init() {
    window.addEventListener('scroll', function(e){
        var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = 0,
            .logo = document.querySelector(".logo");
        if (distanceY > shrinkOn) {
            classie.add(.logo,"smaller");
        } else {
            if (classie.has(.logo,"smaller")) {
                classie.remove(.logo,"smaller");
            }
        }
    });
}
window.onload = init();

Answer 1

现在在您的代码中发生的是，当您滚动它添加或删除类“较小的”到您的徽标。这意味着，如果您在css中放置以下规则，则徽标图像将更改为您在此css规则中设置的任何大小。您的原始设置是高度:120 are宽度:235 are。

.logo.smaller img {
    height: 80px !important;
    width: auto !important;
}

您可能应该编辑您的填充或任何东西，以获得理想的位置以及。

我添加了！重要的，以确保它将覆盖其他样式。

我会这样编写jquery部分：

function resizeLogo() { /* set after which point you want to change the logo. I set it when the scroll is more than your navbar height but you can set it to a numeric value e.g 100 or bind it to an element by an id */ var offset = parseInt($(".navbar").height()); var duration = 500; $(window).scroll(function() { if ($(this).scrollTop() > offset) { $(".logo").addClass("smaller"); } else { if ($(".logo").hasClass("smaller")) { $(".logo").removeClass("smaller"); } } }); }

然后用：

$(document).ready(function() { resizeLogo(); });