javascript - 粘性导航和jQuery

有点问题。想要建立一个粘性导航，当粘性导航触发时，添加“ is-sticky”类，我想向另一个div添加一个不同的类。

下面是代码。

谢谢

<script>
  $(document).ready(function(){
    if ( $(".sticky-wrapper").hasClass("is-sticky") ) {
      $("#menu-item-25").css({display: "inline"});
    }
  });
</script>

最佳答案

这里有很多事情我不确定，但是：

您需要一个事件侦听器，该事件侦听器会导致代码添加/删除所需的类/ css。您现在拥有的是一个事件侦听器，但是它正在侦听文档就绪状态，而不是触发粘性导航的滚动。所以：

<script>
  $(document).ready(function(){
    //add a listener for something that would indicate a sticky-state change, presumably scrolling
    $(document).on('scroll', function() {
      checkForStickyNav();
  });

  function checkForStickyNav() {
    //look for sticky nav, and prevent running over and over
    if ( $(".sticky-wrapper").hasClass("is-sticky") && !$(".otherStuff").hasClass("stickyfied") {
      //do your stuff here; presumably changing CSS as appropriate
      //make sure to add something along the lines of 'stickyfied' above, so that you don't keep re-adding the css on every scroll event
      $("#menu-item-25").css({display: "inline"});
      $('.otherStuff').addClass('stickyfied');
    }
</script>

关于javascript - 粘性导航和jQuery，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20059841/