2019年9月11日 星期三

網頁浮動式固定選單_CSS+JS

RWD風行,所以網站的前端要考慮的層面就多了很多,前端目前缺乏所以得自己來,浮動式固定選單挺常用到,備忘囉!!

CSS
<style>
  .navFixed {
  z-index: 10;         
  position: fixed;     
  top: 0;
  left: 0;
  margin-top: 0;
  min-width: 100%;
  opacity: 0.94;
  transition: opacity .5s ease-out; 
  }
</style>

JS
  <script type="text/javascript">
$(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 495)  {          /* 要滑動到選單的距離 */
       $('.dropdowns').addClass('navFixed');   /* 幫選單加上固定效果 */
    } else {
      $('.dropdowns').removeClass('navFixed'); /* 移除選單固定效果 */
    }
  });
});
  </script> 

HTML
  <div class="navFixed" ></div>

參考來源: https://edwardzou.blogspot.com/2017/09/fixMenu.html

沒有留言: