Question

我正在尝试在滚动上添加/删除效果，但似乎它是瞬时发生的，因此实际上什么也没发生。

 $(window).scroll(function () {
     var sticky = $('.mobile-menu-container'),
     scroll = $(window).scrollTop();

  if (scroll >= 1) sticky.addClass('fixed');
   else sticky.removeClass('fixed');
    $('.mobile-menu-container.fixed').addClass('shadow');
  }).scroll('off', function () {
    $('.mobile-menu-container.fixed').removeClass('shadow');
  });
 });

  .mobile-menu-container{
     position: relative;
     background: green;
     height: 50px;
  }
  .mobile-menu-container.fixed{
     background: red;
  }
  .mobile-menu-container.fixed.shadow{
     box-shadow: 0 6px 2px -2px lightgray;
  }
  .container{
     height: 5000px;
  }

  <div class="container">
    <div class="mobile-menu-container>
      <div class="text">This is the header</div>
    </div>
  </div>

Answer 1

请按以下说明更正您的javascript函数。然后只需添加.sticky

的CSS

window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

 

 html, body {
    margin:0px;
}
.mobile-menu-container {
    position: relative;
    background: green;
    height: 50px;
}
.mobile-menu-container.fixed {
    background: red;
}
.mobile-menu-container.fixed.shadow {
    box-shadow: 0 6px 2px -2px lightgray;
}
.container {
    height: 5000px;
}
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

  

<div class="container">
  <div id="myHeader" class="mobile-menu-container">
    <div class="text">This is the header</div>
  </div>
</div>

在滚动上执行此操作，然后在滚动上执行此操作

1 个答案: