1

我的目标是在标题滚动过去后将菜单栏固定在视口的顶部。

我已经使用这个 jQuery 来实现这一点，并使用以下代码在菜单栏到达顶部时修改 css：

jQuery(document).ready(function($){
    // Check the initial Poistion of the Sticky Header
    var stickyHeaderTop = $('#stickyMenu').offset().top;

    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyHeaderTop ) {
                    $('#stickyMenu').css({position: 'fixed', top: '0px'});
                    $('#stickyAlias').css('display', 'block');
                } else {
                    $('#stickyMenu').css({position: 'static', top: '0px'});
                    $('#stickyAlias').css('display', 'none');
            }
    });
});

这是我的开发页面和我的工作示例：http ://dev.harryg.me/serge/home/

它在 Firefox 中实现了梦想，但 Chrome 存在问题；css 更改似乎比它应该更早地开始 - 仅向下滚动几个像素后，菜单栏变得固定并粘在顶部。我有一种感觉是标题图片是罪魁祸首，但不知道为什么......

编辑：感谢您的所有建议。由于我远离我的开发设置，我将不得不等待重新审查您的所有建议。正如 Explosion Pills 和 Malk 所说，问题是因为在stickyHeaderTop加载标题图像之前计算。这就是为什么它在图像被缓存后起作用，但如果你刷新页面则不起作用。我稍后会尝试 Explosion Pills 的解决方案，并根据需要投票/接受。

4

3 回答 3

2

问题是顶部的图像没有被渲染，并且当你第一次计算时，它的高度没有在布局中考虑stickyHeaderTop。有两种解决方案（都很简单）：

  1. 在顶部（内部）添加正确width和height属性。无论如何，这样做是个好主意。<img><a id="home_link">
  2. stickyHeaderTop最初不要计算。而是进行比较$(window).scrollTop() > $("#stickyMenu").offset().top。效率的不明显下降值得准确计算。

如果你愿意，你也可以两者都做。

于 2013-01-31T01:41:31.853 回答
1

我已经在同一个问题上处理过 chrome，导致此错误可能有两种可能性：

  • 不使用变量内部条件if( $(window).scrollTop() > stickyHeaderTop ) {

  • 尝试像这样更改css()函数的顺序：

    $('#stickyAlias').css('display', 'block');

    $('#stickyMenu').css({position: 'fixed', top: '0px'});

我在 1 年前建立这个网站时遇到了这些问题。

如果两者都不起作用，请尝试以下方式：

这是工作的jsFiddle。

$(window).scroll(function() {

   var headerH = $('.header').outerHeight(true);
   console.log(headerH);
   //this will calculate header's full height, with borders, margins, paddings

   var scrollVal = $(this).scrollTop();
    if ( scrollVal > headerH ) {
        $('#subnav').css({'position':'fixed','top' :'0px'});
    } else {
        $('#subnav').css({'position':'static','top':'0px'});
    }
 });

来源。

于 2013-01-31T00:50:18.510 回答
1

我认为 document.ready 事件在渲染完成之前触发。尝试订阅load窗口事件而不是ready文档事件。就像是：

function scrollSpy(){
// Check the initial Poistion of the Sticky Header
    var stickyHeaderTop = $('#stickyMenu').offset().top;

    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyHeaderTop ) {
                    $('#stickyMenu').css({position: 'fixed', top: '0px'});
                    $('#stickyAlias').css('display', 'block');
                } else {
                    $('#stickyMenu').css({position: 'static', top: '0px'});
                    $('#stickyAlias').css('display', 'none');
            }
    });
}
window.addEventListener('load', scrollSpy, false);
于 2013-01-31T01:32:50.253 回答