Sticky Sidebar像Facebook一样如何添加偏移量？

Question

如何在向上滚动时从顶部向我的侧边栏添加偏移量？目前，标题重叠。有没有办法解决这个问题？

由于

＆＃13;

＆＃13;

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

＆＃13;

*,
*: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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Fiddle

Answer 1

使用jQuery获取$('.header').height();

的高度

top: 0

向上滚动时，不要使用if (scrollVal < $(element).offset().top) { $(element).css({ 'top': headerHeight, 'left': $(element).offset().left, 'bottom': 'auto', 'width': $(container).innerWidth(), 'position': 'fixed' }); } 定位侧边栏，而是使用标题的高度。

@Parameters

fiddle