modifying CSS of a div element on a designated page position

Question

modifying CSS of a div element on a designated page position

A unique code snippet that I have positions a button fixed to the top of the page, causing it to overlay content or images as the user scrolls the page.

HTML

<div id="btn">button</div> 

... images ...

... content ...

CSS

#btn { 
  position: fixed;
  z-index: 999;
  color: #fff;
  top: 0; right: 0;
}

I am looking for a way to trigger a change in the CSS of the #btn element when it reaches a specific point on the page, like an 'anchor'.

So essentially, when the button hits this anchor point:

 <div id="btn">button</div> 

... images ...

anchor changing the css 

... content ...

Note: The distance between my button and the content or images is not known or controlled by me.

javascript jquery html css

Answer 1

Answer №1

Here is a potential JavaScript solution that I believe could be useful for your situation. Give it a try!

Click here to view the code

window.onscroll=function(){
if(document.getElementById('btn').getBoundingClientRect().top>= document.getElementById('header').getBoundingClientRect().top){
  document.getElementById('btn').style.color = '#fff';
  }else{
  document.getElementById('btn').style.color = '#000';
  }
}

#btn { 
  position: fixed;
  z-index: 999;
  top: 0; right: 0;
}
#header{
  margin-top: 100px;
  height: 400px;
  background-color: red;
}
#content{
  height: 400px;
  background-color: green;
}

<div id="body">
<a id="btn">Button </a>
<div id="header">
Header
</div>
<div id="content">
Content
</div>
<div id="images">

</div>
</div>

Answer 2

Here is a potential JavaScript solution that I believe could be useful for your situation. Give it a try!

Click here to view the code

window.onscroll=function(){
if(document.getElementById('btn').getBoundingClientRect().top>= document.getElementById('header').getBoundingClientRect().top){
  document.getElementById('btn').style.color = '#fff';
  }else{
  document.getElementById('btn').style.color = '#000';
  }
}

#btn { 
  position: fixed;
  z-index: 999;
  top: 0; right: 0;
}
#header{
  margin-top: 100px;
  height: 400px;
  background-color: red;
}
#content{
  height: 400px;
  background-color: green;
}

<div id="body">
<a id="btn">Button </a>
<div id="header">
Header
</div>
<div id="content">
Content
</div>
<div id="images">

</div>
</div>

modifying CSS of a div element on a designated page position

Answer №1

Similar questions

Guide to opening all href links in a new window

Struggling with implementing Vue.js for making a task list using Bootstrap 5

Is there a way to unshackle myself from the promise chain in Express and trigger an error ahead of time

Regular Expression: Identify specific characters at the start or end of a string

Ways to eliminate hover effect in CSS

Managing ajax requests timeouts while abiding by the browser's connection limitations

PHP code to display "ed elements that do not adjust height"

The 'import' statement is not functioning properly within a script in the rendered HTML

Is there a way to set a default CSS background image using JavaScript in case the specified

Attempting to include a new choice on a drop-down menu and ensure its visibility within the drop-down menu

Utilize GeoJSON to showcase multiple features in a convenient table format

Searching for words in both uppercase and lowercase

The SVG animation is reversing and decreasing in size from the bottom

The event is not triggered by ng-submit

Javascript function is providing unexpected output

Prevent the link from stretching to cover the entire width of the page

Modify CSS progress circle to update the percentage of completion

Is it feasible to merge Apollo queries within the context of Nuxt?

Alter the class of a div when a key is pressed

The browser has blocked access to XMLHttpRequest from a specific origin due to the absence of the 'Access-Control-Allow-Origin' header in the requested resource