admin管理员组

文章数量:1293165

I have written some simple jQuery to have the background of my navbar change opacity from transparent to blue relative to the users scroll position.

  $(window).scroll(function(){

  var range = $(this).scrollTop();
  var limit = 450;

  var calc = range / limit;
  console.log(range);

  //Bg Opacity Control
  if (range === 0) {
    $('.navBg').css({
      opacity: 0
    });

  }else if(range < limit){
    $('.navBg').css({
      opacity: calc
    });


  }else if(range > limit){
    $('.navBg').css({
      opacity: 1
    });
  }

});

My next task is to have the font color transition as well. I want the color to change the same way the navs background changes (relative to the users scroll position). I started by creating two arrays containing hexadecimal values of colors to represent the color scale for the font transition.

  //Blue to White
  var fontScale = ["#19BFFF",
                  "#336CFF",
                  "#4CCDFF",
                  "#66D4FF",
                  "#7FDBFF",
                  "#99E2FF",
                  "#B2E9FF",
                  "#CCF0FF",
                  "#E5F7FF",
                  "#FFF"];

  //White to Gray
  var hoverScale = ["#eaeaea",
                   "#d6d5d5",
                   "#c1c0c1",
                   "#adacac",
                   "#989798",
                   "#848283",
                   "#6f6e6e",
                   "#5a595a",
                   "#464445",
                   "#323031"];

With my scrollTop() limit set to 450, within where these transitions should take place, I have 10 colors in each array. I want to change the CSS of the font color each time the user scrolls down 45px ( 450 / 10 = 45 ) by iterating through the colors in the arrays.

Here are my jQuery selectors for the elements that should be changing color using the arrays I posted above:

    //Main Font color to use fontScale array
    $('.navbar .navbar-header .navbar-brand')
    $('.navbar #navbar ul li a ')

    //active links to use hoveScale array
    $('.navbar #navbar .navbar-nav > .active > a')
    //Hover links to use hoverScale array
    $('.navbar #navbar ul li a:hover')

I'm unsure wether I should be using a for loop, a while loop, or purely if statements? Some advice or direction would be greatly appreciated! I can also post more code upon request.

Cheers!

**UPDATE

Here is my HTML.

  <div class="navBg">
    </div>
    <nav class="navbar navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <span class="navbar-brand" href="#home">JG</span>
        </div>
        <div id="navbar" class="navbar-collapse collapse navbar-right">
          <ul class="nav navbar-nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
    </nav>

This is my updated jQuery:

  var currentFontIndex = range * fontScale.length / limit;

  currentFontIndex = Math.round(currentFontIndex);
  console.log(fontScale[currentFontIndex]);

  if(currentFontIndex > fontScale.length){

    $('.navbar .navbar-header .navbar-brand').css({
      color: fontScale[currentFontIndex]
    });
    $('.navbar #navbar ul li a').css({
      color: fontScale[currentFontIndex]
    });

  }

For some reason the styles aren't being applied and I'm not sure why. My selectors are properly set to override the style set in my CSS stylesheet. Also, the fontScale array index is logging to my console the correct index values.

Any ideas?

I have written some simple jQuery to have the background of my navbar change opacity from transparent to blue relative to the users scroll position.

  $(window).scroll(function(){

  var range = $(this).scrollTop();
  var limit = 450;

  var calc = range / limit;
  console.log(range);

  //Bg Opacity Control
  if (range === 0) {
    $('.navBg').css({
      opacity: 0
    });

  }else if(range < limit){
    $('.navBg').css({
      opacity: calc
    });


  }else if(range > limit){
    $('.navBg').css({
      opacity: 1
    });
  }

});

My next task is to have the font color transition as well. I want the color to change the same way the navs background changes (relative to the users scroll position). I started by creating two arrays containing hexadecimal values of colors to represent the color scale for the font transition.

  //Blue to White
  var fontScale = ["#19BFFF",
                  "#336CFF",
                  "#4CCDFF",
                  "#66D4FF",
                  "#7FDBFF",
                  "#99E2FF",
                  "#B2E9FF",
                  "#CCF0FF",
                  "#E5F7FF",
                  "#FFF"];

  //White to Gray
  var hoverScale = ["#eaeaea",
                   "#d6d5d5",
                   "#c1c0c1",
                   "#adacac",
                   "#989798",
                   "#848283",
                   "#6f6e6e",
                   "#5a595a",
                   "#464445",
                   "#323031"];

With my scrollTop() limit set to 450, within where these transitions should take place, I have 10 colors in each array. I want to change the CSS of the font color each time the user scrolls down 45px ( 450 / 10 = 45 ) by iterating through the colors in the arrays.

Here are my jQuery selectors for the elements that should be changing color using the arrays I posted above:

    //Main Font color to use fontScale array
    $('.navbar .navbar-header .navbar-brand')
    $('.navbar #navbar ul li a ')

    //active links to use hoveScale array
    $('.navbar #navbar .navbar-nav > .active > a')
    //Hover links to use hoverScale array
    $('.navbar #navbar ul li a:hover')

I'm unsure wether I should be using a for loop, a while loop, or purely if statements? Some advice or direction would be greatly appreciated! I can also post more code upon request.

Cheers!

**UPDATE

Here is my HTML.

  <div class="navBg">
    </div>
    <nav class="navbar navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <span class="navbar-brand" href="#home">JG</span>
        </div>
        <div id="navbar" class="navbar-collapse collapse navbar-right">
          <ul class="nav navbar-nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
    </nav>

This is my updated jQuery:

  var currentFontIndex = range * fontScale.length / limit;

  currentFontIndex = Math.round(currentFontIndex);
  console.log(fontScale[currentFontIndex]);

  if(currentFontIndex > fontScale.length){

    $('.navbar .navbar-header .navbar-brand').css({
      color: fontScale[currentFontIndex]
    });
    $('.navbar #navbar ul li a').css({
      color: fontScale[currentFontIndex]
    });

  }

For some reason the styles aren't being applied and I'm not sure why. My selectors are properly set to override the style set in my CSS stylesheet. Also, the fontScale array index is logging to my console the correct index values.

Any ideas?

  • javascript
  • jquery
  • html
  • css
  • scrolltop
Share Improve this question edited Feb 14, 2017 at 1:51 Jcode asked Feb 14, 2017 at 0:30 JcodeJcode 2332 silver badges11 bronze badges 3
  • but u didn't provide html – grzesiekmq Commented Feb 14, 2017 at 1:05
  • html added for you – Jcode Commented Feb 14, 2017 at 1:58
  • you should set the css according to .css() api.jquery./css with .css("color", colorVar) but u try instead getting not setting property – grzesiekmq Commented Feb 14, 2017 at 11:41
Add a ment  | 

4 Answers 4

Reset to default 5

If you can convert some Y coordinate (0px to 450px) into opacity (0 to 1) you can do the same for array index!

0px -> 0 opacity -> index 0
450px -> 1 opacity -> index  10

...

currentScrollTop-> currentColorIndex

cross product!

currentColorIndex = currentScrollTop * 10 / 450

or 

var range = $(this).scrollTop();
var limit = 450;

var fontScale=[
 ....
]

var currentFontIndex = range * fontScale.length / limit;

 //of course, you can't only have integer for index,
 //so you'll have to chose a rounding function, like: 
currentFontIndex = Math.round(currentFontIndex);

if(currentFontIndex > fontScale.length)
     currentFontIndex = fontScale.length

$('.navBg').css('color', fontScale[currentFontIndex]);

I want to change the CSS of the font color each time the user scrolls down 45px ( 450 / 10 = 45 ) by iterating through the colors in the arrays

You can divide $(this).scrollTop() by 45 to reference element of array

var fontScale = [
  "#19BFFF",
  "#336CFF",
  "#4CCDFF",
  "#66D4FF",
  "#7FDBFF",
  "#99E2FF",
  "#B2E9FF",
  "#CCF0FF",
  "#E5F7FF",
  "#FFF"
];

var div = $("div");

$(window).on("scroll", function(e) {
  var curr = Math.round($(this).scrollTop() / 45);
  console.log(curr);
  div.css("color", fontScale[curr])
}).scroll()
body {
  height: 500px;
  background: yellow;
  position: absolute;
  display: block;
  text-align: center;
  top: 50vh;
  left: 35vw;
  font-size: 36px;
  font-weight: bold;
}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div>abc</div>
</body>

simple example with for ( ; ; ) to show idea

var fontScale = ["#19BFFF",
  "#336CFF",
  "#4CCDFF",
  "#66D4FF",
  "#7FDBFF",
  "#99E2FF",
  "#B2E9FF",
  "#CCF0FF",
  "#E5F7FF",
  "#FFF"
];
var height = $(window).scrollTop();
$(window).scroll(function() {


  for (var i = 0; i < 3; i++) {
    if (height >= 0) {
      $('body').css('color', fontScale[i]);
    }
  }
  for (var i = 3; i < 6; i++) {
    if (height > 100) {
      $('body').css('color', fontScale[i]);
    }
  }
  for (var i = 6; i < fontScale.length; i++) {
    if (height > 200) {
      $('body').css('color', fontScale[i]);
    }
  }

});
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
lorem ipsum aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaalorem ipsum aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaalorem ipsumlorelorem
ipsum aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaloaaaaaaaaaaaaaaalorem ipsumlorelorem ipsum aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaalorem ipsumlorelorem ipsum aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaalorem ipsumlorelorem ipsum aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaalorem
ipsumlorelorem ipsum aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaalorem ipsumlorelorem ipsum aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaalorem
ipsumlorelorem ipsum aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaarem ipsumlorelorem ipsum aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaalorem
ipsumloreaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaalorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlolorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem iprem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</nav>
</div>

and use if with conditions u want to make intervals with colors

This works: 

var currentFontIndex = range * fontScale.length / limit;

  currentFontIndex = Math.round(currentFontIndex);
  console.log(fontScale[currentFontIndex]);

  if(currentFontIndex <= fontScale.length){

    $('.navbar .navbar-header .navbar-brand').css(
      'color', fontScale[currentFontIndex]
    );
    $('.navbar #navbar ul li a').css(
      'color', fontScale[currentFontIndex]
    );

  }

The only problem that lies now is finding an application that will allow me to create custom color palettes. For example I need all colors from #00ADEF(a light blue) to #FFF(white). The current colors i'm using in my arrays are way off and it looks terrible. Does anyone know of a good resource I can use?

本文标签： javascriptHow to create a color transition controlled by window scrollStack Overflow

版权声明：本文标题：javascript - How to create a color transition controlled by window scroll - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741568635a2385872.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。