Question

Hello Stackoverflow bootstrappers！

我之前没有看到过这个问题，我真的很想看到结果。

如何复制错误：

打开页面：（我当前测试此错误的网址） http://dnwebdev.com/dev/
将页面调整为平板电脑
使用导航栏

（请注意，网址已更改为包含#section）只有在您调整浏览器大小时才会出现这种情况。这会导致间谍/滚动关闭。

注意：如果您在移动设备上打开它，问题就不会发生，因此客户端不会面对它，这只会让我烦恼。

谢谢，期待您的回复。

修改：点击标题品牌时，网址会添加#section-1而无需调整大小，这也让我失望。在这一点上，我认为这是一个自助事件。

我页面上唯一的Javascript如下：

function close_toggle() 
{
    if ($(window).width() <= 768) 
    {
        $('.nav a').on('click', function() {
                $(".navbar-toggle").click();
        });
    } 
    else 
    {
        $('.nav a').off('click');
    }
}

close_toggle();

$(window).resize(close_toggle);

在移动设备上进行选择后，上面的代码将关闭切换。

if ($(window).width() <= 768) 
{
    var offset = 75;
} 
else 
{
    var offset = 90;
}

$('.navbar li a').click(function(event) {
    event.preventDefault();
    $($(this).attr('href'))[0].scrollIntoView();
    scrollBy(0, -offset);
});

上面的代码（基于屏幕尺寸）将抵消scrollspy

编辑＃2

我需要任何偏移的唯一原因是由于fixed-top会导致rolllspy出现异常。

非常感谢帮助。

Answer 1

Fixed-top似乎带有滚动间谍的bug，让我别无选择，只能使用javascript。

Answer 2

要处理导航正确突出显示，您必须考虑当scrollTop值等于零时，scrollSpy所做的所有计算都会执行。

所以解决方案看起来像这样：

var refreshScrollSpy = function (element, navElement, offset) {
// cache current scroll position to come back after refreshing
var cacheScrolltop = $(element).scrollTop();
   $(element)
   .scrollTop(0)
   .scrollspy(‘refresh’)
   .scrollTop(cacheScrolltop);
};

调整浏览器大小时bootstrap scrollspy bug

2 个答案: