Липкий Navbar мерцает во время прокрутки вниз ⇐ Jquery

[Anonymous]

Я использую jQuery, чтобы сделать меню липким, когда окно прокручивается вниз. Он маленький, он мерцает, когда страница слегка прокручивается вниз. src = "https://i.sstatic.net/kgvx7ob8.gif"/>

Код: Выделить всё

jQuery(document).ready(function($) {

var my_nav = $('.navbar-sticky');
// grab the initial top offset of the navigation
var sticky_navigation_offset_top = my_nav.offset().top;

// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function() {
var scroll_top = $(window).scrollTop(); // our current vertical position from the top

// if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
if (scroll_top >  sticky_navigation_offset_top) {
my_nav.addClass('stick');
} else {
my_nav.removeClass('stick');
}
};

// run our function on load
sticky_navigation();

// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});

});< /code>
html {
font-size: 100%;
}

body {
font-size: 15px;
font-size: 0.9375rem;
font-family: "Open sans", Helvetica, Arial, sans-serif;
color: #666666;
padding: 0;
}

.topspace {
margin-top: 40px;
}

/*********************************************************************/
.navbar {
border-width: 1px 0;
-webkit-border-radius: 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0;
-moz-background-clip: padding;
border-radius: 0;
background-clip: padding-box;
}

.navbar.stick {
position: fixed;
top: 0;
left: 0;
opacity: .85;
}

.navbar-collapse {
-webkit-border-radius: 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 0;
-moz-background-clip: padding;
border-radius: 0;
background-clip: padding-box;
font-family: "Open sans", Helvetica, Arial, sans-serif;
font-weight: 300;
text-transform: uppercase;
}

.navbar-collapse .navbar-nav {
float: none;
margin: 0 auto;
text-align: center;
}

.navbar-collapse .navbar-nav>li {
float: none;
display: inline-block;
}

.navbar-collapse .navbar-nav>li>a {
padding: 20px 30px;
}

.dropdown ul.dropdown-menu {
top: 85%;
text-align: left;
}

.dropdown ul.dropdown-menu>li>a {
padding: 5px 30px;
}

.navbar-default {
background-color: #ffffff;
border-color: #cccccc;
}

.navbar-default .navbar-nav>li>a {
color: #454545;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
color: #000000;
background-color: #ffffff;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
color: #000000;
background-color: #ffffff;
}

.navbar-default .dropdown ul.dropdown-menu>li>a {
color: #454545;
}

.navbar-default .dropdown ul.dropdown-menu>li>a:hover {
background-color: #eeeeee;
color: #000000;
}

.navbar-default .navbar-toggle {
border-color: #666666;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}

.navbar-default .navbar-toggle .icon-bar {
background-color: #333333;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #cccccc;
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
background-color: #ffffff;
color: #000000;
}

#main {
flex: 1;
}

#nav-sidebar {
width: 100%;
z-index: 1;
}

/*********************************************************************/
.section-title,
.entry-title {
display: block;
width: 100%;
overflow: hidden;
margin: 0px 0 25px;
text-align: center;
font-weight: 300;
text-transform: uppercase;
font-size: 36px;
font-size: 2.25rem;
letter-spacing: 1px;
}

.section-title a,
.entry-title a {
color: #333333;
}

.section-title span,
.entry-title span {
display: inline-block;
position: relative;
}

.section-title span:before,
.entry-title span:before,
.section-title span:after,
.entry-title span:after {
content: "";
position: absolute;
height: 4px;
top: .53em;
width: 400%;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}

.section-title span:before,
.entry-title span:before {
right: 100%;
margin-right: 45px;
}

.section-title span:after,
.entry-title span:after {
left: 100%;
margin-left: 45px;
}

.entry-header .entry-meta {
text-align: center;
font-family: Georgia, serif;
font-size: 18px;
font-size: 1.125rem;
font-style: italic;
font-weight: normal;
color:  #a5a5a5;
margin: 0 0 15px 0;
}

.entry-header .entry-meta a {
color: #a5a5a5;
}

.entry-content {
margin: 0 0 60px 0;
}

.entry-content h2 {
line-height: 1.2;
font-size: 30px;
font-size: 1.875rem;
padding-top: 20px;
margin-bottom: 20px;
}< /code>





Hall of fame

[*]






[img]https://code.jquery.com/jquery-3.7.1.slim.js[/img]

Вы можете проверить его на хроме с размерами iPhone12 Pro.
Может ли кто -нибудь указать мне в направлении того, что мне нужно изменить, чтобы стержень остановил мерцание? < /p>

Подробнее здесь: https://stackoverflow.com/questions/794 ... lling-down