【问题标题】:jquery navigation color and height change on scrolljquery导航颜色和滚动高度变化
【发布时间】:2013-12-11 21:48:10
【问题描述】:

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

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

jsfiddle 演示会很棒!

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

【问题讨论】:

    标签: jquery css scroll background-color nav


    【解决方案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元素的类。午饭后我给你举个简单的例子!
    猜你喜欢
    • 2015-06-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-02-03
    • 1970-01-01
    相关资源
    最近更新 更多