フッタにスクロールした後に100％の高さのサイドバーを固定

Question

私は、固定された位置から指定された高さまで絶対位置に移動し、フッターに固定するとき、100％の高さのサイドバーを固定しようとしています。

HTML構造

<header ng-include="'app/views/partials/application-specific/top-navbar.html'"></header> 
<section ng-include="'app/views/partials/user/top-back-user.html'"></section> 
<div class="content"> 
    <aside class="aside sidebar" id="stick" ng-include="'app/views/partials/user/sidebar-user.html'" style="max-height: 100% !important;"></aside> 

<div class="content-wrapper" id="content-wrapper" ui-view> 
</div> 
</div> 
<footer class="footer" id="footer" ng-include="'app/views/partials/user/footer.html'"style="padding-bottom: 0px; height:300px;" ></footer> 

の1-最初のJavaScriptコード150ピクセルスクロール後にトップにサイドバーを解決するのに役立ちます。

var windowWidth = $(window).width(); 
if (windowWidth > 991) { 
    $(window).scroll(function() { 
     if ($(this).scrollTop() > 150) { 
      $('#menu1-fixed').addClass('fixed1'); 
      $('.fado').slideUp(); 
      $('.fado').slideUp(600); 
     } else { 
      $('#menu1-fixed').removeClass('fixed1'); 
      $('.fado').slideDown(); 
      $('.fado').slideDown(600); 
     } 
    }) 
}; 

CSS

.fixed1 { 
    position:fixed !important; top: 0em !important; margin-top: 3.4em !important; 
} 

2-第二のコードは、トップ絶対及び特定の高さで固定された位置を交換からスクロール900pxの後です。その場合は、フッターの上部を検出するために900pxを変更し、変更クラスを絶対に変更する必要があります。

var windowWidth = $(window).width(); 
if (windowWidth > 991) { 
    $(window).scroll(function() { 
     if ($(this).scrollTop() > 900) { 
      $('#menu1-fixed').addClass('main-sidebar2'); 
     } else { 
      $('#menu1-fixed').removeClass('main-sidebar2'); 
     } 
    }) 
}; 

CSS

.main-sidebar2 { 
    position: absolute !important; 
    height:600px !important; 
    min-height: 580px !important; 
    top:1000px !important; 
} 

Answer 1

それが正常に動作します例の下で試してみてください。

$(document).ready(function() { 
    var e = $("#stick"); 
    var lastScrollTop = 0; 
    var firstOffset = e.offset().top; 
    var lastA = e.offset().top; 
    var isFixed = false; 
    $(window).scroll(function(event){ 
     if (isFixed) { 
      return; 
     } 
     var a = e.offset().top; 
     var b = e.height(); 
     var c = $(window).height(); 
     var d = $(window).scrollTop(); 
     if (b <= c - a) { 
      e.css({position: "fixed"}); 
      isFixed = true; 
      return; 
     }   
     if (d > lastScrollTop){ // scroll down 
      if (e.css("position") != "fixed" && c + d >= a + b) { 
       e.css({position: "fixed", bottom: 0, top: "auto"}); 
      } 
      if (a - d >= firstOffset) { 
       e.css({position: "absolute", bottom: "auto", top: lastA}); 
      } 
     } else { // scroll up 
      if (a - d >= firstOffset) { 
       if (e.css("position") != "fixed") { 
        e.css({position: "fixed", bottom: "auto", top: firstOffset}); 
       } 
      } else { 
       if (e.css("position") != "absolute") { 
        e.css({position: "absolute", bottom: "auto", top: lastA}); 
       }    
      } 
     } 
     lastScrollTop = d; 
     lastA = a; 
    }); 
} 
});