html - Make nav bar color match color of sections when scrolling - Stack Overflow

admin管理员组

文章数量:1310254

I would like to change the colour of my navigation bar to suit the colour of the section scrolling past, and in reverse when scrolling the other way.

For example, if the navigation bar is currently dark and the next section to hit the navigation bar is light, I would like to change the nvigation bar to dark.

This is what I have done so far which I feel is relatively close. Please advise what is missing to make this work:

HTML

<nav>Navigation</nav>
<section data-section-color="dark">Section 1</section>
<section data-section-color="light">Section 2</section>
<section data-section-color="dark">Section 3</section>
<section data-section-color="light">Section 4</section>
<section data-section-color="dark">Section 5</section>
<section data-section-color="light">Section 6</section>

SCSS

$dark: #2B3336;
$light: #EEEEEE;

body {
  padding-top: 67px;
  margin: 0;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 67px;
  background: $dark;
  color: $light;
  padding: 0 25px;
  line-height: 67px;
  
  &.dark {
    background: $dark;
    color: $light;
  }
  
  &.light {
    background: $light;
    color: $dark;
  }
}

section {
  height: 400px;
  padding: 25px;
  
  &[data-section-color="dark"] {
    background: $dark;
    color: $light;
  }
  
  &[data-section-color="light"] {
    background: $light;
    color: $dark;
  }
}

jQuery

$(window).on('scroll',function() {
    var $nav = $('nav');
    var navHeight = $nav.height();
    var amountScrolled = $(window).scrollTop();
  
  $('section[data-section-color]').each(function() {
    var thisTop = $(this).offset().top;
    if ((thisTop - navHeight) == 0) {
        var color = $(this).data('section-color');
      $nav.addClass(color);
      console.log(color);
    }
  });
});

JSFiddle:

JSFiddle

I would like to change the colour of my navigation bar to suit the colour of the section scrolling past, and in reverse when scrolling the other way.

For example, if the navigation bar is currently dark and the next section to hit the navigation bar is light, I would like to change the nvigation bar to dark.

This is what I have done so far which I feel is relatively close. Please advise what is missing to make this work:

HTML

<nav>Navigation</nav>
<section data-section-color="dark">Section 1</section>
<section data-section-color="light">Section 2</section>
<section data-section-color="dark">Section 3</section>
<section data-section-color="light">Section 4</section>
<section data-section-color="dark">Section 5</section>
<section data-section-color="light">Section 6</section>

SCSS

$dark: #2B3336;
$light: #EEEEEE;

body {
  padding-top: 67px;
  margin: 0;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 67px;
  background: $dark;
  color: $light;
  padding: 0 25px;
  line-height: 67px;
  
  &.dark {
    background: $dark;
    color: $light;
  }
  
  &.light {
    background: $light;
    color: $dark;
  }
}

section {
  height: 400px;
  padding: 25px;
  
  &[data-section-color="dark"] {
    background: $dark;
    color: $light;
  }
  
  &[data-section-color="light"] {
    background: $light;
    color: $dark;
  }
}

jQuery

$(window).on('scroll',function() {
    var $nav = $('nav');
    var navHeight = $nav.height();
    var amountScrolled = $(window).scrollTop();
  
  $('section[data-section-color]').each(function() {
    var thisTop = $(this).offset().top;
    if ((thisTop - navHeight) == 0) {
        var color = $(this).data('section-color');
      $nav.addClass(color);
      console.log(color);
    }
  });
});

JSFiddle:

JSFiddle

• html
• jquery
• css
• sass

Share Improve this question Follow asked Feb 2 at 16:20 TheCarverTheCarver 19.7k2727 gold badges103103 silver badges153153 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

jQuery:

var $nav = $("nav")
var navHeight = $nav.height()
$(window).on("scroll", function () {
  var amountScrolled = $(window).scrollTop()
  $("section[data-section-color]").each(function () {
    var thisTop = $(this).offset().top
    var thisHeight = $(this).height()
    if (
      parseInt(thisTop - navHeight) < amountScrolled &&
      parseInt(thisTop + thisHeight - navHeight) > amountScrolled
    ) {
      var color = $(this).data("section-color")
      $nav.attr("class", color)
    }
  })
})

JSFiddle:

JSFiddle

The math ((thisTop - navHeight) == 0) your using to target the current section is probably a little too restricted.

The following trys to determine if the nav is contained within the sections bounds.

$(window).on('scroll',function() {
    var $nav = $('nav');
    var navHeight = $nav.height();
  var navTop = $nav.offset().top;
  
  $('section[data-section-color]').each(function() {
    var thisTop = $(this).offset().top;
    var thisHeight = $(this).height();
    var color = $(this).data('section-color');
    if ((navTop >= thisTop) && (navTop+navHeight <= thisTop+thisHeight)) {
      $nav.removeClass(); // dark + light = ???
        $nav.addClass(color);
      console.log(color);
      return false // stop trying after weve found a match
    }
  });
});

Had another go, using getBoundingClientRect()

$(window).on('scroll', function() {
    let nav = $('nav')
    let navRect = nav[0].getBoundingClientRect()
    
    $('section[data-section-color]').each(function() {
        let itemRect = $(this)[0].getBoundingClientRect();
        if (navRect.bottom >= itemRect.top && navRect.top <= itemRect.bottom) {
            nav.removeClass(['dark','light'])
            if ($(this).data('section-color') === 'light') {
                nav.addClass('light')
            } else {
                nav.addClass('dark')
            }
        }
    })
})

本文标签： htmlMake nav bar color match color of sections when scrollingStack Overflow