Sticky Sidebar Like Facebook 如何添加偏移量？

Question

How can I add Offset from top to my sidebar when scrolling up? currently, the header is overlapping. Is there any way to fix this issue?

Thanks

 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"> <header>header</header> <div class="row"> <div class="col-lg-3 adv-search"> <div class="sidebar-inner"> <div class="filter-panel"> <form class="sidebar-filter"> <div class="filter-content"> <div class="filter-holder">{1}</div> <div class="filter-holder">{2}</div> <div class="filter-holder">{3}</div> <div class="filter-holder">{4}</div> <div class="filter-holder">{5}</div> <div class="filter-holder">{6}</div> <div class="filter-holder">{7}</div> <div class="filter-holder">{8}</div> <div class="filter-holder">{9}</div> </div> </form> </div> </div> </div> <div class="col-lg-9 content"> <div class="content"> <div class="text">content 1</div> <div class="text">content 2</div> <div class="text">content 3</div> <div class="text">content 4</div> <div class="text">content 5</div> <div class="text">content 6</div> <div class="text">content 7</div> <div class="text">content 8</div> <div class="text">content 9</div> <div class="text">content 10</div> <div class="text">content 11</div> <div class="text">content 12</div> </div> </div> </div> </div>

Fiddle

Answer 1

Use jQuery to get the height of .header

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

When scrolling up, instead of positioning the sidebar with top: 0 , use the height of the header.

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

}

fiddle

Answer 2

here is link

I made sticky scroller inspired with facebook sidebar. In App.tsx you have example how to use it. I have used react/tsx but you can see how it works