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

How to implement auto fixing a div like https://www.yahoo.com(如何实现自动修复像 https://www.yahoo.com 这样的 div)

问题描述

在雅虎网站中，向下滚动时，蓝色部分固定在顶部，而如果不滚动下来，蓝色部分不固定.

In Yahoo website, when scroll down, a blue part is fixed to the top, while if not scroll down, the blue part is not fixed.

如何实现这个?

我可以试试onScroll功能吗?

推荐答案

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

小提琴演示:演示

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

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

If you want to apply the fixed part to the header replace the class name in the $(window).scroll(function(){}): function.

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

Example for fixed Header while scrolling : Demo-2

这篇关于如何实现自动修复像 https://www.yahoo.com 这样的 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！