Javascript 如何实现自动修复div-likehttps://www.yahoo.com

在中，向下滚动时，蓝色部分固定在顶部，而如果不向下滚动，则蓝色部分不固定

如何实现这一点

---

我可以试试

onScroll

功能吗？

是的，您需要绑定才能获得如下滚动：

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"
            })
        }
    })

---

我使用inspect元素，当“蓝色部分”不在视图中时，它显然会改变类，

---

因此，它所做的（我猜）是在视图中和未视图中更改类，您可以找到一个div是否在视图中，然后相应地更改，“onscroll”是一个好主意，您可以使用css将其修复

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

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

头文件
#我的头{
位置：固定；
排名：0；
宽度：100%；
z指数：1000；
}

使用

$（窗口）。在要修复的零件上滚动（function（）

）

小提琴演示：

如果要将固定部分应用于标头，请替换

$（窗口）中的类名。滚动（function（）{}）：

函数

---

滚动时固定标题示例：

可能您误解了我的意思，请查看并向下滚动。谢谢！

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