jquery导航颜色和滚动高度变化

Posted 2023-02-21

【中文标题】jquery导航颜色和滚动高度变化

【英文标题】：jquery navigation color and height change on scroll

【发布时间】：2013-12-11 21:48:10

【问题描述】：

我希望将导航从透明更改为滚动时的颜色。很像这个网站。 http://createone.com/contact-us/ 我看过关于改变尺寸的帖子，这很棒，我也会使用它，但主要想从透明变为颜色。任何帮助都会很棒。我确实对 jquery 有一点经验，但无法弄清楚或根据我的需要修改其他人以前的问题。

我看到了这个，但无法让它为我工作。 jquery change opacity and height on scroll

jsfiddle 演示会很棒！

提前感谢您的帮助。另外我正在使用 Bootstrap 4，所以如果那里有任何插件。我也对此持开放态度。

【参考方案1】：

您好，您可以从这里开始：http://jsfiddle.net/rcAev/177/

这里我做了这个功能：

$(document).ready (function () 
 $(window).scroll (function () 
    var sT = $(this).scrollTop();
        if (sT >= 300) 
            $('.overlay').addClass('cambio')
        else 
            $('.overlay').removeClass('cambio')
        
  )
)

我会一步一步给你解释：

首先，每次滚动窗口时都会执行该函数

$(window).scroll(函数()

第二次读取卷轴顶部的值以了解您前进了多少

var sT = $(this).scrollTop();

第三次比较你想要的断点，在这种情况下我选择 300 因为我想在传递图像的高度后更改导航。

if (sT >= 300) 
        /*action you want after the 300 or more scroll*/
    else 
        /*action you want before the 300 scroll*/
    

第四个改变透明颜色我应用的动作是添加一个class 具有新的背景和不同的高度：

$('.overlay').addClass('cambio')

【讨论】：

这看起来很棒！我将在我的网站上尝试一下。非常感谢！我会告诉你进展如何。

完美，你可以用更高级的东西来完成这个，比如过渡或动画，但这是你可以开始的方式

这太棒了！我让它完美地工作。有没有一种简单的解决方案可以在短时间内实现它，这样它就不会那么紧张了？

当然可以使用transition:all 1s;在覆盖上检查这个jsfiddle.net/rcAev/24

这太棒了，非常感谢。你真的帮了我很多忙。

【参考方案2】：

在这个site 中，导航高度实际上并没有改变。这是fixed positioning。导航相对于浏览器窗口定位。

jsfiddle

html：

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>
<div id="first"></div><div id="second"></div><div id="third"></div>

CSS：

ul.nav
    position:fixed;

div#first
    height:600px;
    width:100%;
    background:#59071D;

div#second
    height:600px;
    width:100%;
    background:#735448;

div#third
    height:600px;
    width:100%;
    background:#F2DDB6;

【讨论】：

是的，我了解修复导航的部分，但它们也在导航背景上从透明切换为白色。你能告诉我如何做这样的事情吗？非常感谢您的快速回复。

他们根据滚动改变body元素的类。午饭后我给你举个简单的例子！