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

问题描述

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

如何实现？

我可以尝试 onScroll 函数吗？

解决方案

在要修复的部分使用 $（window）.scroll（function（） b

小提琴演示：

  $（window）.scroll（function（）{
 if（$（window）.scrollTop（）> = 100）{
 $ 。sticky-header'）。addClass（'fixed'）; 
} 
 else {
 $（'。sticky-header' } 
}）; 
  

如果要将固定部分应用于标题， $（window）.scroll（function（）{}）：函数中的类名。

在滚动时固定标题：

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.

How to implement this ?

May I try onScroll function?

解决方案

Use $(window).scroll(function() on the part which you want to be fixed.

Fiddle Demo : Demo

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

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

Example for fixed Header while scrolling : Demo-2

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