I successfully created a navigation menu using ul > li.
Currently, the menu is positioned in the center of the page.
My goal is to make the menu stay at the top of the page only while scrolling.
I know I can achieve this using css
.menu {
position:fixed;
top:0;
float:left;
}
.menu li {
float:left;
padding:10px;
margin:2px;
}
However, I am looking for a solution that will only apply this change when scrolling. Any suggestions?
Here is a solution for you:
<script>
$(document).ready(function(){
// Start by hiding the targeted element
$("#xg_navigation").hide();
// Fade in the targeted element when scrolling down the page
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('#xg_navigation').fadeIn();
} else {
$('#xg_navigation').fadeOut();
}
});
});
});
</script>
Here is an example of how you can achieve this:
$(window).scroll(function() {
if ($(document).scrollTop() > 100)
{
$('.navigation').addClass('sticky');
}
});
CSS:
.sticky{position:fixed;}
Don't forget to remove the 'sticky' class from .navigation when the user scrolls back to the top of the page.
I'm facing a bit of difficulty with a task. I need to add a border around an element within an image (I can't insert an image due to low reputation), and this border should match the width and height of the element exactly. It also needs to be re ...
Currently, I am in the process of developing the back-end for a web application utilizing angularJS. One of the key features is allowing users to communicate with each other through a pop-up chat box similar to those found in Gmail or Facebook. My goal is ...
As someone new to HTML, I have an input field with type=number: <input type="number" min="1" value="1" id="amount-input" (click)="chooseStanding(standingspot.priceCategory)"> When the (click) event i ...
Currently, I am in the process of developing my own DRM solution for video content. Each time an access is made to the actual video file, it goes through a verification process. For example, instead of streaming video.mp4 directly, it first passes through ...
Question How can I efficiently import variables.scss globally without the need to duplicate them in every file and reference them in my build instead of importing? Setup I am using Vue2 with laravel-mix, where I have imported index.scss in my main.js ...
It seems that finding an excellent cross-device article is harder than anticipated. I have been trying to create a link that will either open the mobile device's browser and navigate to Google Maps or directly launch a maps app (Apple Maps or Google M ...
` I am trying to create a unique row-column-row layout using CSS flexbox. Below is the code snippet I have: * { padding: 0; margin: 0; box-sizing: border-box; } .container { display: flex; flex-wrap: wrap; gap: 0.2%; } .box { color: whit ...
Hey there! I'm having an issue with a div that contains a link with an onclick event (see the code snippet). Inside this div, there is another link that goes to a different page than the div itself. The code works perfectly fine in IE, Chrome, and Fir ...
When I test the code below in Chrome, I encounter an error: var db = openDatabase('foo', 1, 'foo', 1111); var sql = function(callback){ db.transaction(function(tx){ callback(tx.executeSql); }); }; sql(function(query){ ...
I'm facing an issue with my resize function where the contents within a window change when it reaches a certain width. I'm trying to achieve this same effect on window load but haven't been successful so far. Here's what I've attem ...
I'm working on a card design that contains a div with 3 elements - 2 headers and a paragraph. I need to ensure there is consistent spacing between each element and the top/bottom of the card. Currently, there seems to be too much margin after the last ...
I need help solving a parallax issue that I'm currently facing. On my webpage, I have a background image positioned at the top with a parallax effect achieved through background-position: fixed. However, I now require the image to scroll along with t ...
I am looking to enhance the functionality of a toggle button within a web application that was developed using the JS Dojo API. Currently, the button is utilizing dijit.form.ToggleButton, but I need it to include an additional feature for a dropdown menu w ...
I am currently working on a website where the navigation bar spans the entire width and remains fixed in place. Below the navigation bar is a cover image, followed by the main content section. As you scroll down, the navigation bar covers the image from t ...
I understand that it is possible to detect if a key has been pressed and identify which key was pressed using JavaScript. In order to check if a key is down or pressed, jQuery can be utilized with ease: $( "#some id" ).keydown(function() or $( "#m" ). ...
Let's dive into the challenge... Currently, I'm working on building a virtual environment with WebGL (THREE.js) where various objects produce distinct sounds. My goal is to create a surround sound experience based on the position of these object ...
I have designed a new website at , however, I am facing issues with my CSS on Internet Explorer 11 (version 11.608.15063.0). The font-face and dropdown menu are not displaying correctly. Can anyone assist me with this problem? ...
I am currently working with the code shown below. It successfully displays the first part in full height, regardless of resolution, but once I scroll to the second half, there is a large empty gap. How can I eliminate this gap and make the transition smoot ...
I'm currently facing the challenge of creating a fixed position navbar with white links that should change to black when hovering over another element with a white background. Here is the CSS for the navbar links: nav ul li a {color:#ffffff;} CSS f ...
My current code is affecting all elements instead of just the intended one. I've experimented with classes and ids, ruling out those as potential issues. I'm hoping for my JavaScript to target only the selected element, not all of them. Check ou ...