Question

我编写的代码使导航成为一个粘性导航，但我编写的使其成为粘性导航的代码导致粘性导航闪烁，为什么？故障在哪里？

这是我的代码：

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

Answer 1

这种情况正在发生，因为当你的元素到达窗口的顶部时，它与顶部的距离变得等于$(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.scroll

HTML：

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/

Answer 2

这会让人感到震惊，因为你每次都设置固定导航的顶部，滚动滚动。为了克服这个问题，我使用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函数。

Answer 3

这可能是因为/可能所有“ .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;
}

Answer 4

我们可以通过在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>

粘性导航像闪烁的灯光一样闪烁

4 个答案: