Если пользователь сталкивается с проблемой залипания в IE и старых браузерах, этот JS может быть полезен вместо 'position: sticky' CSS.
(function($) {
$.fn.sticky = function( options ) {
var settings = $.extend({
stickyTop : 0,
stickyBottom : 0,
widthLimit: 0,
stickyClass: false,
stickyParent: false
}, options);
return this.each( function() {
var $ele = $(this);
var eleTop, eleLeft, eleBottom, eleParBot, eleWid, winWid
var r = function(){
eleTop = $ele.offset().top - settings.stickyTop;
eleLeft = $ele.offset().left;
eleBottom = $ele.offset().top + $ele.innerHeight() + settings.stickyBottom;
$eleParent = $ele.parents(settings.stickyParent) || $ele.parent();
eleParBot = $eleParent.offset().top + $eleParent.innerHeight();
eleWid = $ele.innerWidth();
winWid = $(window).outerWidth();
f();
}
var f = function(){
var winTop = $(window).scrollTop();
if(winTop >= eleTop && winWid > settings.widthLimit){
$ele.css({
'position': 'fixed',
'top': settings.stickyTop,
'left': eleLeft,
'width': eleWid
});
if (settings.stickyClass != false) {
$ele.addClass(settings.stickyClass);
}
if(winTop >= eleParBot-$ele.innerHeight()-settings.stickyTop+settings.stickyBottom){
$ele.css('top', (winTop - eleParBot + $ele.innerHeight() - settings.stickyBottom) * -1);
}
else{
$ele.css('top', settings.stickyTop);
}
}
else{
$ele.removeAttr('style').removeClass(settings.stickyClass);
}
}
r();
$(window).scroll(f);
$(window).resize(function(){
$ele.removeAttr('style');
r();
});
});
}
}(jQuery));
$(document).ready(function() {
$('.header-logo').sticky({
stickyParent: 'body',
stickyTop: 0,
stickyBottom: 0,
stickyClass: 'sticky',
widthLimit: 575
});
});
*, *:after, *:before{
box-sizing: border-box;
}
body {
font-family: 'Open Sans', serif;
background-color: #fff;
padding: 0px;
height: 1500px;
}
.header-nav{
background-color: #ddd;
}
.header-logo{
background-color: #ccc;
}
.header-logo a{
display: block;
text-align: center;
font-size: 20px;
line-height: 30px;
padding: 20px 0;
color: #1d1d1d;
text-decoration: none;
}
.header-logo.sticky{
background-color: #1d1d1d;
}
.header-logo.sticky a{
color: #fff;
}
.header-navbar{
padding-top: 18px;
padding-bottom: 18px;
}
.header-navbar ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.header-navbar li{
padding: 5px 20px;
}
.header-navbar li:last-child{
padding-right: 0;
}
.header-navbar li a{
color: #1d1d1d;
text-decoration: none;
}
.more-pen{
position: fixed;
right: 20px;
bottom: 20px;
text-align: right;
text-transform: capitalize;
}
.more-pen a{
display: inline-block;
padding: 5px 20px;
background-color: #1d1d1d;
color: #fff;
border-radius: 4px;
text-decoration: none;
transition: all 0.3s ease-in-out;
}
.more-pen a:hover{
background-color: #8647db;
}
.more-pen a .fa{
font-size: 14px;
margin-left: 7px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container header-nav">
<div class="row align-items-center justify-content-end">
<div class="col-sm-2 header-logo"><a href="#">Logo</a></div>
<div class="col-sm-10 header-navbar">
<ul class="d-flex ml-auto justify-content-sm-end">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
<div class="more-pen">
<a href="https://codepen.io/AsfanShaikh/pen/PrPgZb" target="_blank">For more Stickybar JS demo <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>