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

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

本文介绍了如何实现自动修复像 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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

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

基础教程推荐