粘性标题有2个小问题

时间:2014-11-04 20:28:59

标签: jquery sticky

我正在使用以下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)当向下滚动到230px点时,标题会突然移动到屏幕顶部,它似乎闪烁了一点并且不是一个非常平滑的过渡,不确定是什么导致这个但是如果你采取看看你可以看到这个页面的页面,以及b)如果页面在屏幕的一半处刷新,页面加载时根本就没有菜单(因为它位于页面顶部因此of veiw)并且在再次滚动之前不会出现在屏幕顶部,如何解决?

由于

1 个答案:

答案 0 :(得分:2)

1 - 闪烁 - 在Firefox上看起来很正常,需要更多信息。

2 - 文档加载缺少标题thingy - 你纯粹在滚动上,所以需要在滚动之外。

$(function() {
  stickyHeader();

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

    }
}