Modify the fixed div's class when the user scrolls past a certain section

Question

Modify the fixed div's class when the user scrolls past a certain section

My page includes a fixed menu with various sections, each assigned a specific class name using data attributes (e.g. data-menu="black"). I want the fixed menu to change its class based on the section that is currently underneath it as the user scrolls.

You can view my code on jsFiddle here: 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;
}

The default background color of the menu is red, but I want it to change based on the section below it (e.g. to white when the section has data-menu attribute=menu-white).

javascript jquery html css

Answer 1

Answer №1

The JQuery offset() function provides the relative positioning of a specific element. Feel free to check out this fiddle for more information.

However, it's important to note that this method will only be effective if you have a 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>
      ... [Text continues with Lorem Ipsum content]
    </p>
  </div>

</div>

Answer 2

The JQuery offset() function provides the relative positioning of a specific element. Feel free to check out this fiddle for more information.

However, it's important to note that this method will only be effective if you have a 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>
      ... [Text continues with Lorem Ipsum content]
    </p>
  </div>

</div>

Answer 3

Answer №2

Shoutout to this post about getting the current mouse position on scroll and identifying all elements present at a specified position, which led me to this solution:

Obtain the mouse position under any circumstance
Handle the window scroll event
While scrolling, if the element under the current mouse position is a section: alter the class based on the data-menu attribute. In all other scenarios, 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>
        ... [content repeated for brevity]
    </p>

    <p>
        ... [content repeated for brevity]
    </p>
</div>

Answer 4

Shoutout to this post about getting the current mouse position on scroll and identifying all elements present at a specified position, which led me to this solution:

Obtain the mouse position under any circumstance
Handle the window scroll event
While scrolling, if the element under the current mouse position is a section: alter the class based on the data-menu attribute. In all other scenarios, 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>
        ... [content repeated for brevity]
    </p>

    <p>
        ... [content repeated for brevity]
    </p>
</div>

Modify the fixed div's class when the user scrolls past a certain section

Answer №1

Answer №2

Similar questions

Achieving record creation using jQuery ajax with Rails default :resources routing

When does the ng-disable function become activated?

Creating a customized bundle with Bootstrap using the Rollup tool

Looking to display an alert message upon scrolling down a specific division element in HTML

Secure your React TypeScript applications with GraphQL authentication

having trouble with my lambda function reading the basic json object

Guide on retrieving JSON information within an array utilizing a loop function

Tips for applying CSS conditionally to content at varying nesting levels

steps to determine if a page is being refreshed

Monitoring and recording user's browsing activities while excluding server-side scripting

Tips for customizing elements using Wordpress

I'm caught in a never-ending cycle as I navigate through sending information to my Python API and subsequently utilizing that information in the Next.js application to execute the Python script

CSS border alignment techniques

A guide on incorporating a method using ES6 Rest into a JavaScript object

Second attempt at loading Jquery was unsuccessful

Version 1.0 and higher of Ionic do not display the side menu when using tabs

Differences between CookieParser and req.cookies in ExpressJS

A stateless component in React must always return a valid React element or null

Having challenges retrieving information from MySQL in AngularJS

Leveraging jQuery functions with dynamically generated DOM elements in JavaScript