jquery导航颜色和滚动时的高度变化 [英] jquery navigation color and height change on scroll

问题描述

我想将导航从透明变为滚动时的颜色。很喜欢这个网站。 http://createone.com/contact-us/ 我看到了有关更改尺寸的信息伟大，我会使用这个，以及，但希望主要从透明到一种颜色。任何帮助将是伟大的。我对jquery有一点经验，但没有能够弄清楚或修改别人以前的问题到我的需要。

我看到了，但不是能够得到它为我工作。 jquery更改不透明度和滚动时的高度

一个jsfiddle演示将是巨大的！

感谢提前的帮助。我也使用Bootstrap 4，所以如果有任何插件。

解决方案

您可以开始检查： http://jsfiddle.net/rcAev/17/

这里我做了这个功能：

  $（document）.ready（function（）{
 $ （function（）{
 var sT = $（this）.scrollTop（）; 
 if（sT> = 300）{
 $（'overlay'）。addClass（'cambio '）
} else {
 $（'。overlay'）。removeClass（'cambio'）
} 
}）
}）
  

我会逐步解释一下：

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

$（window）。 scroll（function（）

• 第二次从滚动条的顶部读取值，提前

var sT = $（this）.scrollTop（）;

• 第三次比较你想要的断点，在这种情况下我选择300，因为我想改变nav后通过

    if（sT> = 300）{
   / *或更多滚动* / 
  } else {
   / *在滚动之前你想要的动作* / 
  } 
    




• 第四步要改变透明颜色，我添加一个类：新背景和不同高度： / p>
  
  

    $（'。overlay'）。addClass（'cambio'）
    pre> 

I'm looking to change the navigation from transparent to a color on scroll. Much like this site. http://createone.com/contact-us/ I've seen posts about changing size which is great, I'll use this as well but would like to mainly go from transparent to a color. Any help would be great. I do have a little experience with jquery but haven't been able to figure it out or modify someone else's previous questions to my needs.

I saw this but wasn't able to get it to work for me. jquery change opacity and height on scroll

A jsfiddle demo would be great!

Thanks in advance for the help. Also I'm using Bootstrap 4 so if there's any plugins out there. I'm open to that as well.

解决方案

Hi you can check this to begin : http://jsfiddle.net/rcAev/17/

Here i made this function:

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

I'll explain you step by step:

• First this executes the function every time you scroll the window

$(window).scroll (function ()

• Second read the value from the top of the scroll to know how much you advance

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

• Third compare to the breakpoint you want , in this case i choose 300 because i want to change the nav after pass the height form the image.

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

• Fourth to change the transparent to color the action i apply is add a class with new background and different height:

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

这篇关于jquery导航颜色和滚动时的高度变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！