I am currently using a sticky transparent header on my website www.obviagency.com
Here is the CSS code:
#site-header-inner {
height:0px;
z-index:170;
margin:0 auto;
width:100%;
position:fixed;
top:0;
margin-top:10px;
}
I would like to change the background color to white when scrolling. I have tried multiple solutions without success, so any help would be greatly appreciated.
Thank you in advance!
To achieve this effect, you can utilize JavaScript along with a scroll event listener. In this example, I've used the color blue to demonstrate the change and added a transition property to ensure smooth transitioning of the header.
let header = document.getElementById('site-header-inner');
document.addEventListener('scroll', function() {
// Obtain the current scroll position
let scrollPos = window.pageYOffset;
if ( scrollPos > 100 ) {
header.style.backgroundColor = "white";
} else {
header.style.backgroundColor = "blue";
}
});#site-header-inner {
height:50px;
z-index:170;
margin:0 auto;
width:100%;
position:fixed;
top:0;
margin-top:10px;
background-color: blue;
transition: all 0.3s;
}
#section {
height: 1000px;
}<header id="site-header-inner">
</header>
<section id="section">
</section>Hey there! I'm having a bit of trouble with adding a nested nav within my main nav. The issue is that the nested nav isn't aligning properly under the main nav. Take a look at this screenshot for reference. The nested nav seems to be shifted abou ...
After implementing Masonry on my website, I encountered an issue where all the images stack vertically in a single row once the page loads. Instead, I would like them to stack both horizontally and vertically. You can view the problem on My Jsfiddle. This ...
I have a challenge with placing three images in a circular path one after the other using Tailwind CSS for styling. I've identified the circular path and keyframe style for the images. How do I configure this style in my Tailwind config file and imple ...
For a personal project I am currently working on, I decided to experiment with setting background colors using Javascript. However, I have encountered an issue where my CSS code that changes the hover property does not seem to work after implementing the J ...
Struggling to find the right words to ask this question has made it difficult for me to locate relevant search results. However, I believe a picture is worth a thousand words so...https://i.stack.imgur.com/LfPMO.png I am looking to create multiple columns ...
Can JQuery UI Tabs be modified to fill the horizontal space and stack to the left? In order to achieve this, could we consider using a markup like the one below: <table width="100%"> <tr> <td> ...content... </td> ...
Recently, I started learning javascript and I am attempting to use vanilla javascript to show and hide text on click. However, I can't seem to figure out what is going wrong. Here is the code snippet I have: Below is the HTML code snippet: <p cla ...
I need to stack two images on top of each other while ensuring they remain responsive with a percentage width and height. <div class="container"> <img src="res/bigger.png/> <img src="res/smaller.png class="icon"/> </div> ...
I'm in the process of creating a sidebar for my website. When the sidebar is displayed (by clicking showRight), I want to disable the background content so that the user can't interact with anything outside of the menu. If the user clicks on th ...
Hey there! I'm relatively new to bootstrap and html, and I've encountered an issue with my navbar setup. When I create my navbar, a small box appears on the left side of my screen. Here's an example <head> <meta charset="ut ...
Is there an alternative method to embed Instagram using iframe without the need for an API? ...
I've been working on creating a news slider for my website, but I'm encountering an issue. Despite completing the HTML and CSS, I'm struggling to make the 'showcase' rotate using JQuery. I've tried various guides and instructi ...
Currently, I am in the process of developing a web form that includes a text field intended to receive numeric values. If the user enters non-numeric characters into this field, the form will not submit. However, there is no error message displayed to noti ...
I need some advice on creating a table in HTML where the borders of the leftmost and right most cells do not extend all the way to the edges of the table. Here's an example: | ____ | In this example, the top border of the cells is continuous within ...
Can someone help me create a description for the select tag that won't show up in the drop-down options? I remember seeing this done somewhere, but I can't recall where. Any suggestions? This is what I am trying to achieve: <fieldset> ...
https://gyazo.com/1440b13007c6e011ec46218ceecabb6a Upon examining the screenshot, it is evident that there is a white border surrounding the main content of the page. Despite my attempts to adjust everything to 100% width, I have not been success ...
Hello, I am nearly finished with composing this email, but an issue has arisen on mobile where the header is not stretching to full width. My goal is to make the header image fill the entire width of the screen on a mobile device, but I keep encountering o ...
Encountering difficulties when compiling certain bootstrap 4 modules (switching from beta3). Despite the fact that the issue can be resolved by adding @charset: 'UTF-8'; to the _hover.scss mixin partial (which is flagged as deprecated within the ...
I've encountered an issue with my hidden menu nav bar. The hamburger and close buttons only work once. Should I organize the events within a function and call it at the end, or perhaps use a loop for the button events? It's worth noting that I d ...
I'm working on a bootstrap progress bar that displays a percentage along with the numerical value. Currently, the text fits next to the progress bar up until around 85%, after which it blocks the bar from growing further. You can see the issue in the ...