logo标签列表

如何在滚动时固定页面头部

jquerycssheaderfixed
62

我正在创建一个标题，一旦滚动到一定数量的像素后将固定在原位。

我能否仅使用css和html来实现这一点，还是需要jquery？

我已经创建了一个演示，这样你就可以理解了。任何帮助都将非常感谢！

http://jsfiddle.net/gxRC9/4/

body{
     margin:0px;
     padding:0px;
}
 .clear{
     clear:both;
}
 .container{
     height:2000px;
}
 .cover-photo-container{
     width:700px;
     height: 348px;
     margin-bottom: 20px;
     background-color:red;
}
 .small-box{
     width:163px;
     height:100px;
     border:1px solid blue;
     float:left;
}
 .sticky-header{
     width:700px;
     height:50px;
     background:orange;
     postion:fixed;
}
你不能在没有JS的帮助下完成这个任务。 - Anon
这种方法及其后续答案的问题在于，你最终会依赖于容器不超过你指定的2000像素。这在生产中会失败，因为你要么需要不断调整，要么就要求撰写人员永远不要超出一定的字数限制。无论哪种方式，这种方法都无法扩展。 - JGallardo
使用jQuery和CSS可以帮助您实现滚动时的固定页眉 - http://www.kvcodes.com/2017/03/jquery-simple-sticky-header-on-scroll/ - Kvvaradha
请查看我的关于粘性标头的中等文章，这应该会有所帮助:D - Jose Greinch
16个回答
2
 $(document).ready(function(){

    var div=$('#header');
    var start=$(div).offset().top;

    $.event.add(window,'scroll',function(){
        var p=$(window).scrollTop();
        $(div).css('position',(p>start)?'fixed':'static');
        $(div).css('top',(p>start)?'0px':'');

    }); 
});

它的表现非常完美。

1
custom scroll Header Fixed in shopify:

$(window).scroll(function(){
  var sticky = $('.site-header'),
      scroll = $(window).scrollTop();

  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
})


css:


header.site-header.border-bottom.logo--left.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
}
1
你应该努力在这里解释你的答案。 - Jordan Schnur
0

我的解决方案是，如果用户从底部向上滚动文档，则显示标题。

JS：

const isMobile = window.innerWidth < 768
const $header = $('#header')
let lastScrollTop = 0
if ( isMobile ) {
    $(window).scroll(function () {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop

        if ( scrollTop < lastScrollTop ) {
            $header.removeClass('header_top')
        } else {
            $header.addClass( 'header_top' )    
        }

        lastScrollTop = scrollTop <= 0 ? 0 : scrollTop
    })
}

CSS

.header {
    position: fixed;
    top: 0;
    z-index: 70;
    width: 100vw;
    transition: top .5s;
    height: 62px;
}
.header_top {
    top: -62px;
}
0
希望这个替代方案的一部分对其他人也像对我一样有价值。

情况:
在一个HTML5页面中，我有一个菜单，它是一个位于头部（不是THE header，而是另一个元素中的header）内的nav元素。
我想让导航栏在用户滚动到它时固定在顶部，但在此之前，标题是绝对定位的（所以我可以将其覆盖到其他东西上）。
以上的解决方案从未触发过变化，因为.offsetTop不会改变，因为这是一个绝对定位的元素。此外，.scrollTop属性仅是最顶部元素的顶部...也就是说0，并且始终为0。
我进行的任何测试都无法告诉我导航栏的顶部是否滚动到可视页面的顶部（同样适用于getBoundingClientRect结果），它们在滚动发生时仅保持相同的数字。

解决方案
对我来说，解决方案是利用 

window.visualViewport.pageTop

pageTop 属性的值反映了屏幕可视部分，因此允许我跟踪元素相对于可视区域边界的位置。
这使得可以将一个简单的函数分配给窗口的滚动事件，以便检测导航栏顶部与可视区域顶部相交，并应用样式使其固定在顶部。

可能没必要说，每当我处理滚动时，我都希望使用这个解决方案来对被滚动的元素进行编程响应。
希望能帮助其他人。

0
如果您正在使用React，我最近发布了一个自定义钩子，它使您能够做到这一点。您需要提供一个引用给要固定的元素，以及一个引用给您希望其置顶的元素。它还会为您处理屏幕上的“跳动”（正如其他回答中所提到的）。
const sticky = useRef<HTMLDivElement>(null)
const container = useRef<HTMLDivElement>(null)

useStickyScroll({
    element: sticky,
    container: container
})
0
最简单的方法是： HTML：

<header>
        <h1>Website</h1>
</header>

CSS：

header{
    position: sticky;
    top: 0;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接