如何实现自动修复像 https://www.yahoo.com 这样的 div答案

【问题标题】：How to implement auto fixing a div like https://www.yahoo.com如何实现自动修复像 https://www.yahoo.com 这样的 div
【发布时间】：2014-05-06 06:39:41
【问题描述】：

Yahoo website中，向下滚动时，蓝色部分固定在顶部，如果不向下滚动，蓝色部分不固定。

如何实现这个？

我可以试试onScroll 功能吗？

【问题讨论】：

标签： javascript html css

【解决方案1】：

我使用检查元素，当“蓝色部分”不在视图中时，它显然会更改类，所以它在做什么（我猜）是在视图中而不是视图中更改类，你可以找到一个 div 是否在视图中，然后相应地更改，“onscroll”是个好主意

【讨论】：

【解决方案2】：

在要修复的部分使用$(window).scroll(function()。

小提琴演示：Demo

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

如果您想将固定部分应用于标头，请替换 $(window).scroll(function(){}): 函数中的类名。

滚动时固定标题的示例：Demo-2

【讨论】：

【解决方案3】：

你可以用css来修复它。

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

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

【讨论】：

可能您误解了我的意思，请查看jsfiddle.net/64X2j 并向下滚动。一样的感谢！

【解决方案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"
            })
        }
    })

【讨论】：