Question

我在向下滚动时使用jQuery为我的标题添加了一个类，以不同的方式设置它。每种款式都有两种不同颜色的徽标。原始值大于滚动时加载的值。我给了他们两个差异宽度并且针对该类但是过渡的唯一一个是原始的或#logo1。

＆＃13;

$(window).scroll(function() {
  if ($(document).scrollTop() > 150) {
    $('#main-page').addClass('appear');
    $('#logo1').fadeOut(0);
    $('#logo2').show(0);
  } else  {
    $('#logo2').hide(0);
    $('#logo1').fadeIn(0);
    $('#main-page').removeClass('appear');
  }
});

＆＃13;

#main-page{
  background:transparent;
  position:absolute;
  width:100%;
  top:0;
  transition: background 600ms ease-in-out;
}
	
#main-page .site-nav{
  right:2em;
}
	
#main-page .site-nav a{
  color:white;
}
	
#main-page a.login-nav{
  background:#2ad4dc;
  padding: 1em !important;
  font-size:0.8em;
  color:black;
}
	
#main-page a.login-nav:hover{
  background:#FFF !important;
  color:black !important;
}

#main-page a.vert:before,a.vert:after{
  background:#fff;
}

#main-page .liner:before,.liner:after{
  background:#fff;
}
	
#main-page .got{
  width:220px;
  transition:width 600ms ease-in;
}

.appear .got{
  width:200px !important;
  transition:width 600ms ease-in;
}

.appear{
  position:fixed !important;
  background:white !important;
  top:0;
  width:100%;
  z-index:6;
  box-shadow: 2px 1px 10px #333;
}

#logo2 {
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="main-page">
  <div class="container">
    <div class="logo-container">
      <a id="logo1" href="/">
        <img class="got" src="img/img1.png" alt="test" />
      </a>
      <a id="logo2" href="/">
        <img class="got" src="img/img2.png" alt="test" />
      </a>
    </div>

    <nav class="site-nav">
      <ul class="navi">
        <li>
          <span class="liner">
            <a class="vert" href="/">Home</a>
          </span>
        </li>
        <li>
          <span class="liner">
            <a class="vert" href="https://medium.com/">Blog</a>
          </span>
        </li>
        <li class="log">
          <a class="login-nav" href="/meta">
            <i class="fa fa-sign-in" aria-hidden="true"></i>Try Now
          </a>
        </li>
      </ul>
    </nav>

    <div class="menu-toggle">
      <div class="hamburger"></div>
    </div>
  </div>
</header>

＆＃13;

Answer 1

问题似乎是你隐藏/显示#logo2隐藏/显示方法（设置显示属性）和#logo2{ display:none }。

替代方案可能只有一个img元素，并使用新图像的URL更改src属性。将隐藏的img元素与第二个图像的URL放在一起可能是一个好主意，因此在您显示它之前，它是预取的。

检查下面的代码段以获取完整的解决方案。

＆＃13;

$(window).scroll(function() {
  if ($(document).scrollTop() > 150) {
    $("#logo img").attr("src", "http://via.placeholder.com/350x150");
    $("#logo").addClass("appear");
  } else {
    $("#logo img").attr("src", "http://via.placeholder.com/250x150");
    $("#logo").removeClass("appear");
  }

});

＆＃13;

body {
  height: 600px;
}

#main-page {
  margin-top: 100px;
  background: transparent;
  position: absolute;
  width: 100%;
  top: 0;
  transition: background 600ms ease-in-out;
}

#main-page .site-nav {
  right: 2em;
}

#main-page .site-nav a {
  color: white;
}

#main-page a.login-nav {
  background: #2ad4dc;
  padding: 1em !important;
  font-size: 0.8em;
  color: black;
}

#main-page a.login-nav:hover {
  background: #FFF !important;
  color: black !important;
}

#main-page a.vert:before,
a.vert:after {
  background: #fff;
}

#main-page .liner:before,
.liner:after {
  background: #fff;
}

#main-page .got {
  width: 220px;
  transition: width 600ms ease-in;
  background-color: blue;
}

.appear .got {
  width: 200px !important;
}

.appear {
  position: fixed !important;
  background: white !important;
  top: 0;
  width: 100%;
  z-index: 6;
  box-shadow: 2px 1px 10px #333;
}

.hidden {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header id="main-page">
  <div class="container">
    <div class="logo-container">
      <a id="logo" href="/"><img class="got" src="http://via.placeholder.com/250x150" alt="test"><img class="hidden" src="http://via.placeholder.com/350x150" alt="test"></a>
    </div>

    <nav class="site-nav">
      <ul class="navi">
        <li><span class="liner"><a class="vert" href="/">Home</a></span></li>
        <li><span class="liner"><a class="vert" href="https://medium.com/">Blog</a></span></li>
        <li class="log"><a class="login-nav" href="/meta"><i class="fa fa-sign-in" aria-hidden="true"></i>Try Now</a></li>
      </ul>
    </nav>

    <div class="menu-toggle">
      <div class="hamburger"></div>
    </div>

  </div>
</header>

＆＃13;

css3宽度过渡不适用于图像

1 个答案: