Question

我已经看到了几个不同的线索似乎对此有所了解，但其中的答案都没有为我提供有效的解决方案。

这就是我想要的：

顶部有大徽标的大透明标题。
当用户滚过最顶层区域时，带有小徽标的小彩色标题。

我使用navbar-fixed-top和Bootstrap的scrollspy来添加和删除标题中的某些类。

这就是为什么到目前为止还没有工作的原因：

$(window).scrollTop()根本不会返回任何有意义的内容。
无论如何从顶部更改一定数量的像素似乎是错误的，因为它可能会因屏幕分辨率而异。
根据activate.bs.scrollspy捕获的内容进行更改时，除了在我第一次加载页面时显示错误的标题时，它才能正常运行。
似乎无法在某个位置放置<div id="whatever">并在scrollspy找到时更改标题。我已经尝试将div设置为1px并放置在页面的绝对顶部，但是rolllspy仍然可以从中断开。

此处是我的jQuery代码，这是非常不精确的并且在页面的第一次加载时显示错误的标题（请记住，加载时，您并不总是位于页面顶部）重新加载页面！）。

$(document).ready(function() {
$('body').scrollspy({ target: '.navbar-inverse' });

$('#main-header').on('activate.bs.scrollspy', function () {

    var currentItem = $('.nav li.active > a').text();
    var header = $('.navbar');
    var logosmall = $('.small-brand');
    var logobig = $('.big-brand');

    if (currentItem == 'top' && header.hasClass('navbar-small')) {
        header.removeClass('navbar-small');
    header.addClass('navbar-big');
    logosmall.css('display', 'none');
    logobig.css('display', 'inline-block');
}

    else if (currentItem != 'top' && header.hasClass('navbar-big')) {
        header.removeClass('navbar-big');
        header.addClass('navbar-small');
        logobig.css('display', 'none');
        logosmall.css('display', 'inline-block');
    }
});

});

Answer 1

将代码包装到窗口滚动事件中，如下所述，然后只有$（window）.scrollTop（）将按预期工作。

$(window).scroll(function () {});

Answer 2

以下是您的问题的一个很好的例子，收缩导航栏有点棘手，但并非不可能。你必须考虑很多事情。我刚才发现了这个：http://www.bootply.com/109943

奇怪的是，$(window).scrollTop()顺便说一句，并没有返回任何内容。你在用什么浏览器？以及重新加载浏览器的问题：

$(window).load(function{ //logic to check how far scrolled })

如何制作在向下滚动时改变大小的Bootstrap标头？

2 个答案: