Question

我试图模仿this site上看到的导航栏，但是我遇到了一些JQuery问题。我正在使用if语句进行滚动格式化，然后在if语句的底部包含一个悬停方法。

console.log(inst.selectedYear+'-'+zeroPad(parseInt(inst.selectedMonth)+1)+'-'+zeroPad(i));

我当前代码的问题是，当我希望它不会更改并保持白色时，我滚动到透明后悬停方法正在更改导航栏。

Answer 1

你使用了太多的JavaScript。你应该让CSS为你的元素设计风格。您应该只根据.css添加一个类，而不是多次使用nav。

.hover部分也可以在CSS中完成。经验法则，你永远不应该在其他事件处理程序中附加事件处理程序;总有一种更好的方式。

最后，你应该有这样的事情：

免责声明，我没有像你那样的风格，也没有使用你的HTML，所以你应该根据你的需要调整这些代码。

$(function() {
  var $window = $(window).scroll(function() {
  	var scroll = $window.scrollTop();
      $("nav").toggleClass("sticked", scroll >= 100);
  });
});

body{
  height : 300vh;
}

nav{
  position : fixed;
  top : 0;
  left : 0;
  width : 100%;
  height : 125px;
  background : transparent;
  }
  
  nav .text{
    color : black;
  }
  
  nav:hover{
    background: red;
    }
    
    nav:hover .text{
      color : white;
    }
  
  nav.sticked{
    background : red;
    height : 75px;
    }
    
    nav.sticked .text{
      color : white;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<span class="text">text here</span>
</nav>

Scroll方法中的JQuery悬停方法

1 个答案: