我编写的代码使导航成为一个粘性导航，但我编写的使其成为粘性导航的代码导致粘性导航闪烁，为什么？故障在哪里？
这是我的代码：
;(function($) {
$.fn.tosticky = function(o) {
o = $.extend({
tofixedClass: 'classtofixed',
fixedClass: 'fixedclass',
top: 0,
bottom: 0
}, o);
return this.each(function() {
var $window = $(window),
$this = $(this);
$window.on("scroll", function() {
var fence = $(o.tofixedClass).offset().top;
var scrollTop = $(this).scrollTop();
if(scrollTop > fence) {
$(o.tofixedClass).addClass(o.fixedClass).css({"margin-top":o.top,"margin-bottom":o.bottom});
} else {
$(o.tofixedClass).removeClass(o.fixedClass);
}
});
});
};
})(jQuery);
$(function () {
$(".pagar").tosticky({ // use this to run code in above
tofixedClass: '.pagar',
fixedClass: 'fixed',
top: 0,
bottom: 0
});
});
这是我在jsfiddle中的代码：Click Here
答案 0 :(得分：3)
这种情况正在发生，因为当你的元素到达窗口的顶部时，它与顶部的距离变得等于$(this).scrollTop();，因此你必须包括这些相等的情况，否则另一部分if语句将为true，因此fixedClass将被删除，然后当您进行滚动时再次重新添加，然后整个事情再次开始，因此闪烁。
要解决此问题，只需将{em>大于符号（>）替换为{{>大于或等于符号（>=）{ {1}}陈述：
if这是您更新的小提琴：http://jsfiddle.net/1wxggpv5/6/
编辑：关注你的评论，虽然这不是原始问题的一部分，但我知道你希望盒子保留在原来的位置，然后重新回到原点。滚动回来时的原始位置。
要做到这一点，您必须在if(scrollTop >= fence) {
$(o.tofixedClass).addClass(o.fixedClass).css({"margin-top":o.top,"margin-bottom":o.bottom});
} else {
$(o.tofixedClass).removeClass(o.fixedClass);
}
内移动#box并将.pagar变量移出fence函数，如下所示：
jQuery（相关位）：
on.scrollHTML：
return this.each(function() {
var $window = $(window),
$this = $(this),
fence = $(o.tofixedClass).offset().top;
$window.on("scroll", function() {
var scrollTop = $(this).scrollTop();
if(scrollTop >= fence) {
$(o.tofixedClass).addClass(o.fixedClass).css({"margin-top":o.top,"margin-bottom":o.bottom});
} else {
$(o.tofixedClass).removeClass(o.fixedClass);
}
});
});
我使用以下代码更新了原始小提琴：http://jsfiddle.net/1wxggpv5/19/
答案 1 :(得分：0)
这会让人感到震惊，因为你每次都设置固定导航的顶部，滚动滚动。为了克服这个问题，我使用setTimeout和clearTime out。
$.fn.tosticky = function(o) {
o = $.extend({
tofixedClass: 'classtofixed',
fixedClass: 'fixedclass',
top: 0,
bottom: 0
}, o);
return this.each(function() {
var timeoutId = null;
var $window = $(window),
$this = $(this);
$window.on("scroll", function() {
if(timeoutId){
clearTimeout(timeoutId);
}
var fence = $(o.tofixedClass).offset().top;
var scrollTop = $(this).scrollTop();
if(scrollTop > fence) {
timeoutId = setTimeout(function(){$(o.tofixedClass).addClass(o.fixedClass).css({"margin-top":o.top,"margin-bottom":o.bottom});}, 200);
} else {
$(o.tofixedClass).removeClass(o.fixedClass);
}
});
});
};
请检查this fiddle;
这里在scroll函数中我使用了setTimeout和clearTimeout函数。
答案 2 :(得分：0)
这可能是因为/可能所有“ .offset().top;”之一位于滚动功能内部，这意味着每次滚动时，都会重置“ top”（此处）对我有用的代码
var nav = $('.nav-wrapper');
var NavTp = $('.nav-wrapper').offset().top;
$(document).scroll(function ()
{
var scroll = $(window).scrollTop();
if (scroll <= NavTp) {
nav.css({ "position": "static"});
nav.removeClass('addfix');
}
else {
nav.addClass('addfix');
}
});
.addfix {
position: fixed!important;
z-index: 999;
top:0;
}
.nav-wrapper{
display: grid;
grid-gap: 20px;
background: #2c2c2c;
}
答案 3 :(得分：0)
我们可以通过在CSS下方添加
来停止屏幕闪烁
th,td{border:1px solid #ccc}
th {padding: 1em 0.5em;
position: -webkit-sticky;
position: sticky;
white-space: nowrap;
top: 0px;
border-left: 1px solid #eee;
border-bottom: 1px solid #ddd;
font-size: 13px;
text-align: center;
z-index: 6;
background: #fff;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}<div style="max-height:300px; overflow:auto"><table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<th>asdf</th>
<th>asdf</th>
<th>asdf</th>
<th>asdf</th>
<th>asdf</th>
<th>asdf</th>
<th>asdf</th>
<th>asdf</th>
<th>asdf</th>
<th>asdf</th>
<th>asdf</th>
<th>asdf</th>
<th>asdf</th>
</tr>
</table>
<table id="bodyTable" border="0" cellpadding="0" cellspacing="0" width="600" style="z-index:9;">
<tr>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
</tr>
<tr>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
</tr>
<tr>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
</tr>
<tr>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
</tr>
<tr>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
</tr>
<tr>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
</tr>
<tr>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
</tr>
<tr>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
</tr>
<tr>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
</tr>
<tr>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
</tr>
<tr>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
</tr>
<tr>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
</tr>
<tr>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
</tr>
<tr>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
</tr>
<tr>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
</tr>
<tr>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
</tr>
<tr>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
</tr>
<tr>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
</tr>
<tr>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
</tr>
<tr>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
</tr>
</table>
</div>