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>My goal is to include 4 unique divs inside a timeline container: This is how I envision the structure: <div id="timeline" > <div class="timeline-bar t-1"></div> <div class="timeline-bar t-2"> ...
I currently have an SVG icon encoded within my CSS file. I'm looking to change the color of this icon when a user hovers over it without creating a duplicate icon in a different color. Here's a snippet from my CSS file: background-image: url("d ...
In an effort to enhance the aesthetics of a website, I have been utilizing Twitter Bootstrap. One snippet of my HTML code looks like this: <div class = 'container-fluid bg-1'> <div id ='yield_wrap'> ...
I've been struggling to find a resolution for this issue but I haven't been able to come up with anything effective. Here's the basic concept of what I'm trying to achieve. My goal is to have my layout divided into 3 divs. The first se ...
Any suggestions on how to create a grid template similar to the image shown in this picture? I am looking to achieve this design without rounded borders and without any gaps between the elements. ...
Hello there! I have come across an issue that I need some help with. I have a fixed sidebar and header on my website, both of which have drop shadows applied to them. However, I don't want the header to cast a shadow on the sidebar as I want them to ...
Having a small JS script that functions properly, but encountering an issue when quickly hovering over buttons causing the smooth transition effect to not work as desired. This abrupt change in image is quite unappealing. Any help would be greatly appreci ...
describe food option heredescribe juice option hereHow can I create a button using HTML, CSS, JavaScript, and Bootstrap that displays different images for food and juices when clicked? For example, clicking on "food" will display 3 different food images, w ...
My goal is to design something like this: I want to have a single-color strip that extends over three columns: https://i.sstatic.net/1XfAu.png What I am aiming for is a layout where the grey line overlaps columns 2 and 3. /* added by editor for demo p ...
While working on custom checkboxes, I came across a unique situation - the only way the positioning of the checkboxes aligns properly is if the classes '.init' and '.hover' are assigned to images, and the class '.done' is disp ...
I am having trouble implementing an overflow animation on vuetify's v-text-field component. Despite my efforts, I can't seem to make it work as intended: <script setup> const text = 'very long long long long long text' </scri ...
Having multiple dropdowns (select boxes) on my website has led me to desire different alignments for them. For instance, I would like one dropdown to be centered on a specific page while another should appear on the right side of a separate page. Since my ...
I've been struggling to align the Toggle button with the input box for quite some time now. I really need them to be inline so that they form a grid properly as everything is dynamic. I have experimented with using a Div on its own instead of a label ...
Currently, I am attempting to make the menu overlap the content on my webpage. However, I am facing an issue where it moves the content box instead of overlapping it. I have already experimented with the position: relative concept, but unfortunately, the ...
Currently, I am working on a layout design using Bootstrap 3 that involves eight text divs. These divs have almost the same height, but some are slightly taller depending on the screen width. My goal is to arrange them into three columns on desktop and th ...
Although I've seen similar questions before, none of the solutions seem to be effective in my case. In this scenario, there's a div class that has a background image set up: #index-box{ border-radius: 20px; background: url('/stati ...
I am currently facing an issue where I need to increase the size of my icons by 200px, but they are defaulting to 24px which is the standard for all Google Icons. Any suggestions on how to solve this? HTML <div class="col span-1-of-4 box"> <i ...
I took the initiative to manually download the css and js files for an angular module (here). In order to make a small adjustment, I modified the css (specifically changing max-width in the media query): Original: @media only screen and (max-width: 800px ...
My website, vladimirvojtela.com, features a gallery with a horizontal scrollbar that leaves whitespace at the end due to the width parameter in the code. Can anyone suggest a script that can automatically adjust the DIV width after all images have been ren ...
Seeking assistance from the talented individuals here. Currently in the process of constructing a website for a client, and one of the key components on the index page is an image slider/fader that showcases a series of images. The client has requested a u ...