如何制作浮动菜单->位置：静态答案

【问题标题】：How do I make a floating menu -> position:static如何制作浮动菜单->位置：静态
【发布时间】：2017-03-21 14:43:30
【问题描述】：

我想制作浮动菜单position:static(or position:absolute. bottom:(floating-menu's height))，当它遇到页脚时！

我最初制作了浮动条position:static。

滚动时上下移动。我想让这个固定或静态..

$(window).bind(EVENT.SCROLL, function(){
  if(($(window).scrollTop() + $(window).height()>= $('.footer-container').position().top)){ 
    $('#floating-bar').css({'position': 'static'});

  } else {
    $('#floating-bar').css({'position': 'fixed'});
  }

}).bind(EVENT.RESIZE, function(){
  if(that.SCALE[0] > 900) sticky_sidebar();
});

#floating-bar{ 
  display:block; 
  text-align: center; 
  bottom: 0; 
  position: static; 
  width: 100%; //position:fixed;
   .check-price {
     float:left; 
     padding: 20px 16px; 
     line-height: 23px;
     background-color: #f1f4ff; 
     color: @emp-color; 
     font-size: 1.07em;
   }
   .order {
     margin-left: 82px; 
     padding: 20px 63px; 
     background-color: @emp-color; 
     color: #fff; 
     font-size: 1.38em;
   }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="floating-bar">
  <div class="check-price">가격 확인</div>
  <div class="order">R5 멤버십 신청하기</div>
</div>

【问题讨论】：

标签： javascript css footer floating

【解决方案1】：

这是我对我的回答。

$(window).bind(EVENT.SCROLL, function(){
     var floating_bar = $('#floating-bar');
     if($(window).scrollTop() >= $(document).height() - $(window).height() - $('.footer-container').height() && !floating_bar.hasClass('unsticky')){
           floating_bar.addClass('unsticky');
        }
        if($(window).scrollTop() < $(document).height() - $(window).height() - $('.footer-container').height() && floating_bar.hasClass('unsticky')){
            floating_bar.removeClass('unsticky');
        }

    }).bind(EVENT.RESIZE, function(){
        if(that.SCALE[0] > 900) sticky_sidebar();
    });


#floating-bar {display:block; text-align: center; bottom: 0; position: fixed; z-index:5; width: 100%;
            &.unsticky {position:absolute;}
            .check-price {float:left; padding: 20px 16px; line-height: 23px; background-color: #f1f4ff; color: @emp-color; font-size: 1.07em;}
            .order {margin-left: 82px; padding: 20px 0; background-color: @emp-color; color: #fff; font-size: 1.38em;}
        }

【讨论】：