Question

我正在尝试创建一个基本的粘贴标头。标题包含两部分：top和main。当页面向下滚动时，我想只保留.main粘性（以便.top变得不可见）。

我正在尝试跟随代码，但它是生涩的，如果内容具有特定的高度，它不会让滚动，开始跳跃。我拍摄了视频来说明问题。请参阅： http://www.screenr.com/Z89H

（由于屏幕高度不同，您可能看不到问题，在这种情况下，拖动结果窗口将其高度设置为大约535px。）

HTML：

<header>
    <div class="top"></div>
    <div class="main"></div>
</header>
<section>

</section>

jQuery的：

$(window).scroll(function () {
   var height = $('header').outerHeight();

    if($(this).scrollTop() > height){
        $('header').addClass('sticky');    
    }else{
        $('header').removeClass('sticky');
    }       
});

Answer 1

http://jsfiddle.net/M33g4/1/

$(window).scroll(function () {
   var height = $('.top').outerHeight();

    if($(this).scrollTop() > height){
        $('header').addClass('sticky');    
    }else{
        $('header').removeClass('sticky');
    }       
});

猜猜你的身高错了。

<强>更新

闪烁问题是由高度变化引起的（由于position: fixed）

检查一下：http://jsfiddle.net/M33g4/6/

$(window).scroll(function () {
   var height = $('.top').outerHeight();

    if($(this).scrollTop() > height){
        if($('.main.sticky').length == 0) {
            $('header').append(
                $('.main').clone().addClass('sticky'));
        }
    }else{
        $('.main.sticky').remove();
    }
});

并仅限.main：

.sticky{
    position: fixed;
    width: 100%;
    top: 0;
}

Answer 2

检查

http://jsfiddle.net/M33g4/3/

JS

$(window).scroll(function () {
   var height = $('.top').height();

    if($(this).scrollTop() > height){
        $('.top').hide();    
        $('header').addClass('sticky');    
    }else{
        $('.top').show();
        $('header').removeClass('sticky');

    }

});

CSS

*{
    margin: 0;
    padding: 0;
}
header{
    width: 100%;
}

.top{
    height: 50px;
    background: blue;
}

.main{
    height: 70px;
    background: green;
}

section{
    height: 560px;
    background: yellow;
}

.sticky{
    position: fixed;
    width: 100%;

}

Answer 3

您应该定位到top，而不是整个header demo

$(window).scroll(function () {
   var height = $('header .top').outerHeight();

    if($(this).scrollTop() > height){
        $('header').addClass('sticky');    
    }else{
        $('header').removeClass('sticky');
    }

});

Answer 4

我相信你现在已经解决了这个问题，但在遇到同样的问题之后我想出了一个解决方案：

问题是由于文档尺寸在折叠下方没有足够的余地以适应整个标题的高度。这意味着如果访问者试图向下滚动，标题的粘性部分将变得固定，但会立即自行解锁。我相信它可能是导致问题的反弹效应，但我没有测试验证这一点。

简而言之，我通过添加简单的检查来修复它，通过比较主体的高度和窗口的高度来确保折叠下方有足够的空间。即，身高减去窗口高度必须大于总头部高度。这是我的实例中的代码：

  // Sticky sub navbar
  var sub_nav_height = $('#sub-nav').outerHeight();
  var total_height = $('#main-head').outerHeight();
  var header_height = total_height - sub_nav_height;
  var content_height;
  var y;
  $(window).scroll(function() {
    // Only make sticky if window is large enough not to cause jumping issue
    content_height = $('body').height() - $(window).height();
    if(content_height > total_height) {
      y = $(this).scrollTop();

      if($(this).scrollTop() > header_height) {
        $('#sub-nav').addClass('fixed');
      } else {
        $('#sub-nav').removeClass('fixed');
      }
    }
  });

有两个警告，我认为对我的情况绝对没问题。第一个是每次触发滚动事件时都添加了额外的计算，但这并没有给我带来任何性能问题。第二个是当一个vistor的窗口大小有问题时，简单地禁用了粘贴头功能，但我再次对此没有任何疑虑，因为导航栏仍然可以被看到。

Answer 5

这对我有用：

将高度变量设置为30：

$(window).scroll(function () {
   var height = 30;

    if($(this).scrollTop() >= height){
        $('header').addClass('sticky');    
    }else{
        $('header').removeClass('sticky');
    }

});

并将粘性类的css更改为以下内容：

.sticky{
    position: fixed;
    width: 100%;
    top: -30px;
    left: 0;
}

Top是-30而不是-40。适合我！

jQuery粘性标题在特定高度跳转

5 个答案: