如果元素在data-attribute上滚动，则

Question

I have two headers (menu1 - default, menu2 - display:none).

In sections of website I added special attribute (data-ix="change-header"). I want to have the effect.. that if I will scroll site and if we scrolled on section where data-ix="change-header" then header will be other - so menu1 will be display:none and menu2 will be display:block;

I have something like that, but I don't know how I can use scroll.

if ($(this).attr("data-ix") == "change-header"){
    $("‪#‎menu1‬").css("display","none");
    $("‪#‎menu2‬").css("display","block");
} else {
    $("#menu1").css("display","block");
    $("#menu2").css("display","none");
}

My html looks like that:

<header id="menu1"></header>
<header id="menu2"></header>
<div class="test" data-ix="change-header"></div>
<div class="test"></div>
<div class="test" data-ix="change-header"></div>
<div class="test" data-ix="change-header"></div>
<div class="test" data-ix="change-header"></div>
<div class="test"></div>
<footer></footer>

Help :)

Answer 1

You can take a look at this: http://janpaepke.github.io/ScrollMagic/

It's only 6Kb gzipped, and it lets you animate elements or toggle CSS classes based on scroll position :)

Answer 2

You can compute the threshold values at which you will change header (or not). Something like this

var thresholds = [];
$('.test').each(function(i, e) {
  // after we scroll past the top coordinate of this element,
  // either show or hide the second header, based on the presence
  // of the data-ix attribute
  thresholds.push([e.offsetTop, $(e).data('ix') === 'change-header']);
});

Then, consult these thresholds on every scroll event

// cache menu elements
var $menu1 = $('#menu1'), $menu2 = $('#menu2');

// update header once, and listen on scroll
update();
$(window).on('scroll', update);

function update() {
  // pick first visible threshold
  var scrollTop = $(this).scrollTop(), thresh;
  for (var i = 0, len = thresholds.length; i < len; ++i) {
    thresh = thresholds[i];
    if (thresh[0] >= scrollTop) break;
  }

  // update header as necessary
  if (thresh[1]) {
    $menu1.hide();
    $menu2.show();
  } else {
    $menu2.hide();
    $menu1.show();
  }
}

Here is a working Plunker.