如何製作浮動菜單 - > position：static

Question

我想在浮動菜單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>

Answer 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;} 
     }