Javascript 向下滚动时的CSS标题效果（更改背景和颜色）

当标题离开当前块时，我试图做一个好的效果。我希望在向下滚动时更改背景色和文本的颜色

html:

举个例子最好，类似这样的例子

<div class="thiswillhide hidesearch">

---

谢谢

您正在寻找的平滑过渡可以在CSS中完成，但是您需要一些JavaScript来启动动画

window.onscroll=function（）{
var top=window.scrollY；
console.log（'Top:'+Top）；
var header=document.getElementsByTagName（'header'）；
var offset=header.innerHeight；//将偏移量更改为动态，因此它可以在移动屏幕上工作。
如果（顶部>偏移）{
标题[0]。类列表。删除（'top'）；
标题[0]。类列表。添加（'scrolled'）；
}否则{
标题[0]。类列表。删除（'滚动'）；
标题[0]。类列表。添加（'top'）；
}
};
*{
框大小：边框框；
保证金：0；
填充：0；
}
身体{
位置：相对位置；
}
标题{
宽度：100%；
位置：固定；
高度：75px；
显示：块；
排名：0；
z指数：100；
字号：20pt；
填充：15px 10px
}
页眉{
背景：#222；
颜色：#fff；
过渡：所有0.3秒缓解；
}
标题。已滚动{
背景:#555；
颜色：#E0；
过渡：所有0.3秒缓解；
}
格林先生{
背景：绿色；
颜色：#000；
z指数：2
}
瑞德先生{
背景：红色；
颜色：#fff；
z指数：1
}
部分{
位置：相对位置；
高度：800px；
填充：100px 10px
}
#内容1{
背景#D9D9D9；
z指数：1
}
#内容2{
背景：#9FDAD0；
z指数：2
}
Logo
内容
到这里来

内容
到这里来

您可以随类更改它。就像我使用这个网站一样


它有这样的课

 <div class="header-v2 navbar-fixed-top">



但当向下滚动到50像素时，它会显示这一点

<div class="header-v2 navbar-fixed-top top-nav-collapse">



这是正常的

<div class="thiswillhide">



但当向下滚动更多的时候，它会像这样

<div class="thiswillhide hidesearch">



您可以使用此代码

<script>
    //jQuery to collapse the navbar on scroll
    $(window).scroll(function() {
        if ($(".header-v2").offset().top > 50) {
            $(".navbar-fixed-top").addClass("top-nav-collapse");
        } else {
            $(".navbar-fixed-top").removeClass("top-nav-collapse");
        }
        if ($(".header-v2").offset().top > 600) {
            $(".thiswillhide").addClass("hidesearch");
        } else {
            $(".thiswillhide").removeClass("hidesearch");
        }
    });
</script>


//jQuery可折叠滚动条上的导航栏
$（窗口）。滚动（函数（）{
如果（$（“.header-v2”）.offset（）.top>50）{
$（“.navbar固定顶部”）.addClass（“顶部导航折叠”）；
}否则{
$（“.navbar固定顶部”）.removeClass（“顶部导航折叠”）；
}
如果（$（“.header-v2”）.offset（）.top>600）{
$（“.thiswillhide”）.addClass（“hidesearch”）；
}否则{
$（“.thiswillhide”）.removeClass（“hidesearch”）；
}
});

谢谢
所以我用一些Javascript重新编辑了它。
这个效果太棒了，如果你喜欢，可以随意改进！
这是否可以在没有Javascript的情况下实现


const secondBlock=document.getElementById（'content2'）
const header=document.getElementsByTagName（'header'）
常数头数=61
函数setHeader（）{
常量滚动点=window.pageYOffset+headerHeight
设blockPoint=61-（滚动点-secondBlock.offsetTop）
if（阻塞点二次阻塞偏移）{
标题[0]。样式=`最大高度：${blockPoint}px`
}否则{
页眉[0]。样式=`max height:${headerHeight}px`
}
window.requestAnimationFrame（setHeader）
}
window.requestAnimationFrame（setHeader）
*{
框大小：边框框；
保证金：0；
填充：0；
}
标题{
显示：块；
字号：20pt；
高度：61px；
线高：61px；
左侧填充：10px；
位置：固定；
排名：0；
宽度：100%；
}
标题#第一{
背景:"8292C3,；
颜色：#000；
溢出：隐藏；
z指数：10；
}
标题#秒{
背景:"c3b9,；
颜色：#fff；
z指数：9；
}
部分{
高度：500px；
填充：100px 10px；
位置：相对位置；
}
#内容1{
背景#96A6D5；
}
#内容2{
背景：#99D6CC；
}
Logo-向下滚动查看魔术！
徽标-向下滚动查看魔术！酷！
内容
到这里来

内容
到这里来

我很确定他们也使用了javascript来完成，所以我在问题中编辑了标记javascript。检查这个可能会有帮助：所以onscroll检查位置并应用classI不想更改孔标题的颜色。希望标题平滑，100%适合背景。我认为这是可能的与eg z-索引和两个头像上面的代码，但我错过了一些东西：W3C正在努力使这一部分的css。。。Firefox和其他一些浏览器将支持它。。。这是一个“polyfill”是的，它可以工作，但不是我想要的，看看标题。Dropbox的标题不会改变颜色、大小或任何东西。为此，您只需要
位置：fixed；top:0
CSS调用，并确保您的
body
是
position:relative以便元素在其中的位置起作用。编辑：我看到的唯一其他东西可能是标题下的框阴影，所以它看起来像是站在页面上方？但除此之外，我不确定我是否理解你的问题。
<script>
    //jQuery to collapse the navbar on scroll
    $(window).scroll(function() {
        if ($(".header-v2").offset().top > 50) {
            $(".navbar-fixed-top").addClass("top-nav-collapse");
        } else {
            $(".navbar-fixed-top").removeClass("top-nav-collapse");
        }
        if ($(".header-v2").offset().top > 600) {
            $(".thiswillhide").addClass("hidesearch");
        } else {
            $(".thiswillhide").removeClass("hidesearch");
        }
    });
</script>