粘性标题的 2 个小问题

Posted 2023-03-16

【中文标题】粘性标题的 2 个小问题

【英文标题】：2 minor issues with sticky header

【发布时间】：2014-11-04 20:28:58

【问题描述】：

我正在使用以下 jquery 在我的网站 (http://tinyurl.com/pmow22f) 上创建一个粘性标题：

jQuery(document).ready(function( $ ) 
$(window).scroll(function() 
if ($(this).scrollTop() > 230)  
    $('header').addClass("sticky");
    $('#headerwrapper').removeClass();
  
  else
    $('header').removeClass("sticky");
    $('#headerwrapper').addClass("headerwrapper");
  
);
);

我的问题是 a) 当向下滚动到 230 像素点时，标题捕捉到屏幕顶部，它似乎有点闪烁，不是一个非常平滑的过渡，不确定是什么原因造成的，但如果你采取看看页面你可能会看到这个，并且b）如果页面在屏幕一半时刷新，则页面加载时根本没有菜单（因为它位于页面顶部，因此veiw) 并且直到再次滚动后才出现在屏幕顶部，如何解决？

谢谢

【问题讨论】：

嗨，我的回答解决了问题吗？

@dwhite.me 不，我很抱歉打破了我的粘性标题，我不知道您是否在代码中遗漏了一些括号或其他内容，但看起来像一对多的右括号结束，你能确认一下吗？谢谢

【参考方案1】：

1 - 闪烁 - 在 Firefox 上看起来不错，需要更多信息来解决这个问题。

2 - 文档加载缺少标题的东西 - 你完全在滚动上有这个，所以需要在滚动之外有这个。

$(function() 
  stickyHeader();

)
$(window).scroll(function() 
  stickyHeader();
)
function stickyHeader()
    if ($(document).scrollTop() > 230)  
        $('header').addClass("sticky");
        $('#headerwrapper').removeClass();
    else
        $('header').removeClass("sticky");
        $('#headerwrapper').addClass("headerwrapper");

    

【讨论】：

最后两行需要修改：` ); ` 到：` ); ` 感谢您的宝贵时间。