如何实现自动修复一个div像https://www.yahoo.com(How to impleme

在雅虎网站上 ，当向下滚动，蓝色部分是固定在顶部，而如果不向下滚动，蓝色部分是不固定的。

如何实现这一点？

我可以试一下onScroll功能？

Answer 1:

使用$(window).scroll(function()要对被固定部。

小提琴演示： 演示

$(window).scroll(function(){
    if ($(window).scrollTop() >= 100) {
       $('.sticky-header').addClass('fixed');
    }
    else {
       $('.sticky-header').removeClass('fixed');
    }
});

如果你想申请的固定部分的头中的替换类名$(window).scroll(function(){}):功能。

滚动时例如用于固定报头： 演示-2-

Answer 2:

我使用检查元素，apperantly它改变上课的时候说，“蓝色部分”是不是在看，所以它是做什么（我猜）是变化的类，而它在视图，而不是在视图中，可以发现，如果一个div在视图，然后相应地改变，“onscroll”是个好主意

Answer 3:

你可以把它刚刚与CSS固定。

<div id="myHeader">Header stuff</div>

#myHeader {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

Answer 4:

是的，你需要绑定赢得滚动这样的：

var element = $(YOURTOPELEMENT)
    $(window).scroll(function () {
        var scrollTop = $(window).scrollTop();
        if (scrollTop > element.offset().top) {
            element.css({
                position: "fixed",
                top: 0
            })
        } else {
            element.css({
                position: "relative"
            })
        }
    })

文章来源: How to implement auto fixing a div like https://www.yahoo.com