2

I have fixed div with menu. There are also some sections. Each section has data attribute set to specific class name (eg. data-menu="black"). What I'd like to achieve is when user scroll and a section with this attribute is under a fixed div, this div gets the class based on data-menu attribute. And remove when section isn't below anymore.

This is my is fiddle: https://jsfiddle.net/pt3taagp/1/

HTML

<div class="fixed-menu">
  <ul>
  <li>menu 1</li>
  <li>menu 2</li>
  <li>menu 3</li>
  <li>etc.</li>
  </ul>
</div>
<section data-menu="menu-black">
  <img src="http://placehold.it/600x600/ffffff/000000">
</section>
<section data-menu="menu-white">
  <img src="http://placehold.it/600x600/000000/ffffff">
</section>
<div>some other content</div>

CSS

fixed-menu {
  position:fixed;
  top:50px;
  left:50px;
  width:250px;
  background-color:red
}
.fixed-menu.menu-black {
  background-color:#000;
}

.fixed-menu.menu-white {
  background-color:#FFF;
}

By default menu has red background but when section with data-menu attribute=menu-white is under I'd like this menu to change background color to white, etc.

Kaziko
  • 142
  • 10

2 Answers2

0

JQuery offet() method gives relative positioning of a particular element. Check out this fiddle.

Although, this will only work if you have fixed section height.

 window.onscroll = function() {
   myFunction()
 };

 function myFunction() {
   var x = $("#mainmenu").offset();
   if (x.top < 612) {
     document.getElementById("mainmenu").className = "fixed-menu menu-white";
   } else if (x.top > 612) {
     document.getElementById("mainmenu").className = "fixed-menu menu-black";
   }else{
     document.getElementById("mainmenu").className = "fixed-menu";
   }
 }
.fixed-menu {
  position: fixed;
  top: 50px;
  left: 50px;
  width: 250px;
  background-color: red
}
.menu-black {
  background-color: #000;
  color: white;
}
.menu-white {
  background-color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div id="mainmenu" class="fixed-menu">
    <ul>
      <li>menu 1</li>
      <li>menu 2</li>
      <li>menu 3</li>
      <li>etc.</li>
    </ul>
  </div>
  <div class="black">
    <section data-menu="menu-black">
      <img src="http://placehold.it/600x600/ffffff/000000">
    </section>
  </div>
  <div id="white">
    <section data-menu="menu-white">
      <img src="http://placehold.it/600x600/000000/ffffff">
    </section>
  </div>
  <div class="some-other-content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>

</div>
Riken Shah
  • 3,022
  • 5
  • 29
  • 56
  • Sections can have different height. Also order of section can change. I mean sometime first section can have data-menu="menu-black" but other time when user use another photo "menu-white" will suit better. – Kaziko Apr 30 '16 at 15:24
0

Thanks to how get current mouse position on scroll and select all elements present at specified position the solution is:

  • get the mouse position in any case
  • handle the window scroll event
  • while scrolling, if the element under current mouse position is a section: change class according to the data-menu. In all other cases remove the added class.

var xMousePos = 0;
var yMousePos = 0;
var lastScrolledLeft = 0;
var lastScrolledTop = 0;

function GetSectionElementsAt(x, y) {
  var elements = $('section').map(function() {
    var thisObj = $(this);
    var offset = thisObj.offset();
    var l = offset.left;
    var t = offset.top;
    var h = thisObj.height();
    var w = thisObj.width();

    var maxx = l + w;
    var maxy = t + h;

    return (y <= maxy && y >= t) && (x <= maxx && x >= l) ? thisObj : null;
  });

  return elements;
}

$(document).mousemove(function(e) {
  xMousePos = e.pageX;
  yMousePos = e.pageY;
});

$(window).on('scroll', function (e) {
  if(lastScrolledLeft != $(document).scrollLeft()){
    xMousePos -= lastScrolledLeft;
    lastScrolledLeft = $(document).scrollLeft();
    xMousePos += lastScrolledLeft;
  }
  if(lastScrolledTop != $(document).scrollTop()){
    yMousePos -= lastScrolledTop;
    lastScrolledTop = $(document).scrollTop();
    yMousePos += lastScrolledTop;
  }
  var eleAtCurrentMousePos = GetSectionElementsAt(xMousePos, yMousePos);
  if (eleAtCurrentMousePos.length > 0) {
    var classToSet = eleAtCurrentMousePos[0].data('menu');
    if (!$('div.fixed-menu').hasClass(classToSet)) {
      $('div.fixed-menu').removeClass('menu-white menu-black').addClass(classToSet);
    }
  } else {
    $('div.fixed-menu').removeClass('menu-white menu-black');
  }
});
.fixed-menu {
  position: fixed;
  top: 50px;
  left: 50px;
  width: 250px;
  background-color: red
}

.fixed-menu.menu-black {
  background-color: #000;
}

.fixed-menu.menu-white {
  background-color: #FFF;
}
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

<div class="fixed-menu">
    <ul>
        <li>menu 1</li>
        <li>menu 2</li>
        <li>menu 3</li>
        <li>etc.</li>
    </ul>
</div>
<section data-menu="menu-black">
    <img src="http://placehold.it/600x600/ffffff/000000">
</section>
<section data-menu="menu-white">
    <img src="http://placehold.it/600x600/000000/ffffff">
</section>

<div class="some-other-content">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.
    </p>

    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.
    </p>

    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.
    </p>

    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.
    </p>

    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.
    </p>

    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.
    </p>

    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.
    </p>
</div>
Community
  • 1
  • 1
gaetanoM
  • 41,594
  • 6
  • 42
  • 61