Question

简单来说，当我点击图片中的幻灯片时，我要求我的徽标缩小。

但我似乎无法让jQuery工作。有人可以告诉我如何收缩像徽标看到上面的图像而不影响标签的东西吗？一旦我知道如何收缩徽标，我就可以根据自己的喜好编辑尺寸。

以下是导航栏的代码：

<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

您的代码现在发生的事情是，当您滚动它时，可以添加或删除类＆＃34; 较小＆＃34;到你的标志。这意味着如果您在css中放入以下规则，徽标图像将更改为您在此css规则中设置的任何大小。您的原始设置是高度：120px宽度：235px。

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

您可能应该编辑您的填充或任何具有所需位置的内容我添加了！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(); });

滚动时缩小徽标

1 个答案: