スティッキーサイドバーFacebookのようにオフセットを追加するには？

Question

スクロールアップ時に、上からサイドバーにオフセットを追加するにはどうすればよいですか？現在、ヘッダーは重複しています。この問題を解決する方法はありますか？上にスクロール、代わりにSを配置する場合.header

$('.header').height(); 

の高さを取得する

おかげ

var container = $('.sidebar-inner'); 
 
var element = $('.filter-panel'); 
 
var ScrollTop = 0; 
 
var lastScrollVal = 0; 
 

 
$(window).scroll(function(event) { 
 

 
    var scrollVal = $(this).scrollTop(); 
 
    if (scrollVal > lastScrollVal) { 
 

 
     if (scrollVal == $(element).offset().top) { 
 
      $(element).css({ 
 
       'top': $(element).offset().top - $(container).offset().top, 
 
       'left': 'auto', 
 
       'bottom': 'auto', 
 
       'width': '100%', 
 
       'position': 'absolute' 
 
      }); 
 
     } 
 

 
     if (scrollVal > element.offset().top + element.height() - $(window).height()) { 
 
      $(element).css({ 
 
       'top': 'auto', 
 
       'left': $(element).offset().left, 
 
       'bottom': 0, 
 
       'width': $(container).innerWidth(), 
 
       'position': 'fixed' 
 
      }); 
 
     } 
 
    } else { 
 
     if (scrollVal != $(element).offset().top) { 
 
      $(element).css({ 
 
       'top': $(element).offset().top - $(container).offset().top, 
 
       'left': 'auto', 
 
       'bottom': 'auto', 
 
       'width': '100%', 
 
       'position': 'absolute' 
 
      }); 
 
     } 
 
     if (scrollVal < $(element).offset().top) { 
 
      $(element).css({ 
 
       'top': 0, 
 
       'left': $(element).offset().left, 
 
       'bottom': 'auto', 
 
       'width': $(container).innerWidth(), 
 
       'position': 'fixed' 
 
      }); 
 

 
     } 
 
     if (scrollVal < $(container).offset().top) { 
 
      $(element).css({ 
 
       'top': '', 
 
       'left': '', 
 
       'bottom': '', 
 
       'width': '', 
 
       'position': '' 
 
      }); 
 
     } 
 
    } 
 
    lastScrollVal = scrollVal; 
 
});

*, 
 
*:after, 
 
*:before { 
 
    content: " "; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding-top:80px; 
 
} 
 
.header{ 
 
    height: 80px; 
 
    position: fixed; 
 
    left: 0; 
 
    top:0; 
 
    width: 100%; 
 
    z-index: 1; 
 
    background: blue; 
 
} 
 
.filter-holder { 
 
    margin-bottom: 100px; 
 
} 
 

 
.filter-holder:last-child { 
 
    margin-bottom: 0; 
 
} 
 

 
.text { 
 
    margin-bottom: 150px; 
 
} 
 

 
.container { 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
    width: 100%; 
 
    max-width: 1170px; 
 
} 
 

 
header { 
 
    height: 604px; 
 
    background-color: #efefef; 
 
} 
 

 
.row { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    margin-right: -15px; 
 
    margin-left: -15px; 
 
} 
 

 
.col-lg-3 { 
 
    flex: 0 0 25%; 
 
    max-width: 25%; 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
} 
 

 
.col-lg-9 { 
 
    flex: 0 0 75%; 
 
    max-width: 75%; 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
} 
 

 
.adv-search, 
 
.content, 
 
.sidebar-filter { 
 
    padding: 15px; 
 
} 
 

 
.adv-search { 
 
    position: relative; 
 
    background-color: #eee; 
 
} 
 

 
.sidebar-inner { 
 
    position: relative; 
 
    height: 100%; 
 
} 
 

 
.filter-panel { 
 
    height: 1052px; 
 
    position: absolute; 
 
    width: 100%; 
 
    background-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="header">header</div> 
 
<div class="container"> 
 
\t \t <header>header</header> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-lg-3 adv-search"> 
 
\t \t \t \t <div class="sidebar-inner"> 
 
\t \t \t \t \t <div class="filter-panel"> 
 
\t \t \t \t \t \t <form class="sidebar-filter"> 
 
\t \t \t \t \t \t \t <div class="filter-content"> 
 
\t \t \t \t \t \t \t \t <div class="filter-holder">{1}</div> 
 
\t \t \t \t \t \t \t \t <div class="filter-holder">{2}</div> 
 
\t \t \t \t \t \t \t \t <div class="filter-holder">{3}</div> 
 
\t \t \t \t \t \t \t \t <div class="filter-holder">{4}</div> 
 
\t \t \t \t \t \t \t \t <div class="filter-holder">{5}</div> 
 
\t \t \t \t \t \t \t \t <div class="filter-holder">{6}</div> 
 
\t \t \t \t \t \t \t \t <div class="filter-holder">{7}</div> 
 
\t \t \t \t \t \t \t \t <div class="filter-holder">{8}</div> 
 
\t \t \t \t \t \t \t \t <div class="filter-holder">{9}</div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </form> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="col-lg-9 content"> 
 
\t \t \t \t <div class="content"> 
 
\t \t \t \t \t <div class="text">content 1</div> 
 
\t \t \t \t \t <div class="text">content 2</div> 
 
\t \t \t \t \t <div class="text">content 3</div> 
 
\t \t \t \t \t <div class="text">content 4</div> 
 
\t \t \t \t \t <div class="text">content 5</div> 
 
\t \t \t \t \t <div class="text">content 6</div> 
 
\t \t \t \t \t <div class="text">content 7</div> 
 
\t \t \t \t \t <div class="text">content 8</div> 
 
\t \t \t \t \t <div class="text">content 9</div> 
 
\t \t \t \t \t <div class="text">content 10</div> 
 
\t \t \t \t \t <div class="text">content 11</div> 
 
\t \t \t \t \t <div class="text">content 12</div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>

Fiddle

Answer 1

使用のjQuery idebarにtop: 0と入力し、ヘッダーの高さを使用します。偉大

if (scrollVal < $(element).offset().top) { 
    $(element).css({ 
     'top': headerHeight, 
     'left': $(element).offset().left, 
     'bottom': 'auto', 
     'width': $(container).innerWidth(), 
     'position': 'fixed' 
    }); 

} 

fiddle