css 固定されたアイテムを元の位置で静态にする

Posted 2021-05-13

fixed_to_bottom('#fixed-item','fixed');

function fixed_to_bottom(fixedel,cls) {
    var $fixedItem = $(fixedel),
        $body      = $('body'),
        headerHeight, myscroll;
    $(window).on('load', function(){
      $body.removeClass(cls);
      $fixedItem.top = $fixedItem.offset().top;
      headerHeight   = $fixedItem.top - $(window).height();
      $body.addClass(cls);
    });
    $(window).on('scroll resize', function(){
      myscroll = $(window).scrollTop();
      if(myscroll > headerHeight){
          $body.removeClass(cls);
      } else {
          $body.addClass(cls);
      }
    });
}

.fixed #fixed-item {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}