My menu has the following CSS properties:
#header {
width: 100%;
position: fixed;
z-index: 9000;
overflow: auto;
}
With these CSS properties, the element #header will always stay on top, regardless of scrolling. My goal is to add a bottom box shadow to this element #header when scrolling up or down, and remove it when it returns to its default position at the top of the page.
I am open to any suggestions and recommendations.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 0) {
$("#header").addClass("active");
}
else {
$("#header").removeClass("active");
}
});body {
height: 2000px;
margin: 0;
}
body > #header{position:fixed;}
#header {
width: 100%;
position: fixed;
z-index:9000;
overflow: auto;
background: #e6e6e6;
text-align: center;
padding: 10px 0;
transition: all 0.5s linear;
}
#header.active {
box-shadow: 0 0 10px rgba(0,0,0,0.4);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">HEADER</div>As you scroll down the page, the script captures the distance from the top of the document (scroll) and if it's greater than 0, it adds the active class to #header.
If the distance is 0, the class is removed from #header.
To enhance the appearance of your website's header on window scroll, you can implement a CSS class named shadow.
var top = $('#header').offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= 60) { $('#header').addClass('shadow'); }
else { $('#header').removeClass('shadow'); }
});
.shadow {
-webkit-box-shadow: 0px 10px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 10px 5px rgba(50, 50, 50, 0.75);
box-shadow: 0px 10px 5px rgba(50, 50, 50, 0.75);
}
Looking to create a navigation menu with unique colors for each selected state? Check out the code below! After searching extensively, I stumbled upon this snippet. While it only includes one selected state, you can easily customize it for three different ...
On my HTML page, I am trying to implement a button that submits a form using a function. I have set up field validations, and when I click the submit button, it shows an error message but clears out the values I entered and refreshes the form. What I want ...
I attempted to utilize: from json import loads from requests import get text_inside_body_tag = loads(get('https://Clicker-leaderboard.ge1g.repl.co').content) However, it keeps throwing an error related to loads expecting a bytes object or when ...
My code snippet is creating a div with specific classes and elements: '<div class="ctrl-info-panel col-md-12 col-centered">'+ '<h2>You do not have any projects created at the moment.</h2>'+ '<div id="t ...
How can I extract a text-only content from a td tag like 'Zubr Polish Lager 6%'? <td width="35%">Amber Storm Scotch Ale 6% <br/>SIZE/LIFE: 330ml <b>CASE</b> <br/>UOS ...
I have a list of Ajax requests stored in an Array, and I need to wait for all of them to finish loading before processing the results. Here is the code snippet I am currently using: $.when( RequestArray ).done(function(){ this.processResu ...
I've been working on setting up a comments-reply system for my website. I have all the necessary PHP files in place, but I'm facing an issue with updating the vote counts dynamically. In the image provided, you can see that upon voting once, I a ...
In my current project, I encountered a challenge with changing the background color to black and the body text color to white within an iframe. Additionally, all elements that are originally styled with black in an external stylesheet also need to be chang ...
I am currently utilizing Ajax to retrieve XML data and populating form fields with the results. One of the fields on the form is numerical, and I would like to sort the results based on this number (from highest to lowest). How can I achieve this using jQ ...
Currently facing an issue with the scaling of the viewport on certain mobile devices when loading new content via ng-include in our responsive website built on Foundation. The problem arises as the width of the page breaks, leading to horizontal scrolling. ...
Currently, I am utilizing Django 1.2.3 for the development of a website. While my ajax get requests are functioning properly, the post requests only work in development mode (127.0.0.1:8000) and not when the site is deployed in production using Apache + Ng ...
received JSON string: "{Date:'15/05/2015',y:'6'}, {Date:'01/08/2015',y:'6'}, {Date:'02/08/2015',y:'6'}, {Date:'08/08/2015',y:'72'}, {Date:'09/08/2015',y:&apo ...
Similar Question: Formatting dates using Javascript I have recently started working with JavaScript and jQuery. I am currently experimenting with creating a page that retrieves data from a public Google calendar and displays the events, including star ...
Encountered an interesting behavior in jQuery that I wasn't aware of before. It happened with the following code: $("<p><div>item1</div></p>") The resulting output is: [<p></p>, <div>item1</d ...
Can the formvalidation.io plugin be used with React and Materialize-css in a project? My project consists of multiple input components that may or may not be within a form. I want to utilize formvalidation for input validation. However, I am unable to find ...
When I click the button in my HTML and JavaScript code below, I am able to dynamically add a text field and radio button. This functionality is working properly. However, I also want the newly generated text field to have the same font size and appearance ...
I've been trying to figure out how to add a loading scroll feature to my webpage, but I'm running into issues with the div not displaying correctly. Instead of loading underneath the scroll, the content pops up on the side as shown here when scro ...
Currently experimenting with the Open Weather Map API. Two specific calls are being examined, one for London and another for Hermanus in South Africa. Noticing differences in the data returned from each call. Below are the two API calls: Data returned fo ...
Looking to verify a certain condition upon clicking, and if it evaluates to true, toggle the element that was clicked <div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-secondary active" (click)='example ...
Alright, so here's the deal - I have an image that needs to smoothly transition to another image when hovered over. I also have some descriptive text that should crossfade into different text corresponding to the second image. The current setup is ki ...