Question

我无法使用以下条件将元素恢复为默认CSS，如果它是假的。

该函数所做的是在滚动中超出某个点的某些元素CSS（特别是当那些元素的容器 - 一个固定的导航栏 - 在另一个div上滚动时）。

当我向下滚动时功能正常工作但如果我回去（如果变量offsetDiv＆gt; offsetNav）它没有＆＃39;＃34;还原＆＃34;到我想要的默认值。请问这里有什么问题？

的jQuery

$(window).scroll(function(){
  var offsetDiv = $('div').offset().top;
  var offsetNav = $('nav').offset().top;

  if (offsetDiv <= offsetNav){
    $('nav').animate({borderTopWidth:"0px",backgroundColor:"#44217A"},200);
    $('#logosmall').animate({width:"120px",height:"120px"},200);
    $('nav>ul>li>a').animate({lineHeight:"120px"},200);
  }
  else {       
    $('nav').animate({borderTopWidth:"20px",backgroundColor:"rgba(0,0,0,0)"},200);
    $('#logosmall').animate({width:"140px",height:"140px"},200);
    $('nav>ul>li>a').animate({lineHeight:"140px"},200); // These are "CSS defaults". I put them here again because I thought the condition being false would trigger this.
  }
)};

CSS

nav {position:fixed};
#logosmall {width:140px;height:140px};
nav>ul>li>a {line-height:140px;};

Answer 1

正如此jsFiddle所示，您的动画似乎确实会在您需要时应用。（观看小提琴中的控制台输出）

我认为您的部分问题在于，您无法使用background-color

为.animate()等内容添加动画效果

如果您不想为背景颜色制作动画，则需要使用类似jQuery UI的内容。好消息是，如果您愿意使用jQuery UI，可以使用.switchClass()使这一切变得如此简单：

jsFiddle

$(document).ready(function() {
  $(window).scroll(function() {
    var $nav = $('.my-nav')
    var $logo = $('.logosmall')
    var $link = $('.link')
    var offsetDiv = $("#white").offset().top;
    var offsetNav = $link.offset().top;
    if (offsetDiv <= offsetNav) {
      $nav.switchClass('up', 'down', 400);
      $logo.switchClass('up', 'down', 400);
      $link.switchClass('up', 'down', 400);
    } else {
      $nav.switchClass('down', 'up', 400);
      $logo.switchClass('down', 'up', 400);
      $link.switchClass('down', 'up', 400);
    }
  });
});

.my-nav.up {
  position: fixed;
  color: black;
  width: 100%;
  border-top: 20px solid green;
}

.my-nav.down {
  position: fixed;
  color: black;
  width: 100%;
  border-top: 0px;
  background-color: orange;
}

.logosmall.up {
  height: 140px;
  width: 140px;
  float: left;
  background-color: yellow;
}

.logosmall.down {
  height: 100px;
  width: 100px;
  float: left;
  background-color: yellow;
}

.link.up {
  line-height: 140px;
  font-size: 14pt;
}

.link.down {
  line-height: 80px;
  font-size: 10pt;
}

nav ul {
  float: right;
  margin-right: 50px;
}

nav ul li {
  float: left;
}

div#heroimage {
  background-color: red;
  width: 100%;
  height: 600px;
}

div#white {
  background-color: #fff;
  width: 100%;
  height: 1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<nav class="my-nav up">
  <div class="logosmall up"></div>
  <ul>
    <li><a class="link up">Link 1</a></li>
  </ul>
</nav>
<div id="heroimage"></div>
<div id="white"></div>

JQuery - 有条件的Begginner问题

1 个答案:

jsFiddle