When my page loads, I have a header that is positioned absolutely. I want to make it fixed at a certain point when scrolling, which works fine.
The issue arises when trying to add an effect to the header (such as displaying with a delay from the top) while using the position:fixed property.
Here is the code:
CSS
.iaw-header {
position:absolute;
}
JS:
if (jQuery(window).scrollTop() >= 700) {
jQuery('.iaw-header').css('position','fixed');
});
XHTML
<div id="title">
Title text displayed.
</div>
Styling
.title { font-size: 20px; }
JavaScript
if (jQuery(window).scrollTop() >e;= 800) {
$('#title').css('top', '-200px');
$('#title').css('position', 'fixed');
$('#title').animate({top: 0}, 1200);
} else {
$('#title').animate({top: '-200px'}, 1200, function () {
$('#title').css('top', 0);
$('#title').css('position', 'absolute');
});
}
Upon site loading (in styling), the title initially has top: -200px;, and as the user scrolls, the transition to top: 0px; smoothly reveals the title from the top.
$(window).scroll(function () {
var header = $('.iaw-header')
var height = header.outerHeight(true);
if ($(window).scrollTop() > height) {
if (!header.hasClass('fixed')) header.hide().addClass('fixed');
}
if ($(window).scrollTop() >= 400) {
header.slideDown('fast');
} else {
header.removeClass('fixed').show();
}
});
Create a new CSS class:
.fixed {position: fixed;top:0; left:0;width: 100%; }
This code snippet may not be perfect, but it serves as a starting point for further improvements. You can customize and enhance it to suit your needs. Check out the Jsfiddle link for reference:http://jsfiddle.net/lotusgodkk/gxRC9/200/
I am in need of some assistance with my code that dynamically generates select drop down menus. I want each menu to trigger a different function when an option is selected using the "onchange" event, but I am struggling to implement this feature. Any hel ...
I have recently started working on a project that utilizes Bootstrap4 for design and layout. However, there is now a need for the ability to change certain core styles (such as font-face, primary color, and background color) dynamically at runtime. Curren ...
Using jQuery's .ajax to call a webservice has been successful for me. Below are the data parameters used in the call: var parameters = "{'Titre':'" + Titre + "','Description':'" + Description + "','Cont ...
I successfully added an id to each row of my data table using the rowId property, as outlined in the documentation. $('#myTable').DataTable( { ajax: '/api/staff', rowId: 'staffId' } ); Now I am wondering how I can ad ...
Creating a popup for my React app without relying on external libraries is my current project. I am experimenting with using transition and transform with scale to size the popup dynamically based on screen size and content, then center it on the screen. ...
I am trying to implement Live Search JSON Data Using Ajax jQuery, and I want to be able to search through multiple JSON files. When the page initially loads with an empty input field, no results are displayed. However, if you type and then delete text in ...
I am looking to implement a feature on my website similar to Google Maps. I want the top bar and side bars to remain fixed regardless of scrolling, whether using the normal scroll wheel or CTRL + scroll wheel. However, I would like the central part of the ...
I am in need of a sleep function for my JavaScript code. I could use a promise-based function, but it requires the await keyword to function correctly. The issue is that I need to use the sleep function at the top level of my code. function sleep(milliseco ...
Currently in the process of developing a web application that allows users to crop images. The goal is for users to have the ability to email the URL so others can view the cropped image, ensuring that the URL remains active indefinitely by storing every c ...
I'm currently facing an issue during the installation process of an existing Angular application. When trying to run the application using the ng serve command, I encounter the following error message: The "@angular/compiler-cli" package was not prope ...
I have a component in React built with Material UI, where the child component (Paper) is dynamically generated depending on the number of items in an array. The challenge I'm facing is changing the elevation property of the Paper component when it&ap ...
Hey there, I'm currently experimenting with animation and trying to create a cool two-step effect: 1. elements falling down and 2. pulsating on click. However, I've run into an issue where after the clicking action, the elements return to their o ...
I am working on a Flask Web App that utilizes Boostrap and plain JavaScript. The challenge I am facing is related to making an XMLHttpRequest to upload a file to s3 when a form is submitted. However, the issue arises because the page reloads before the xhr ...
I'm new to CSS and I want to center the brand logo and links in the navbar. HTML <nav class="navbar navbar-expand-md center"> <a class="navbar-brand" href="http://www.dimsum.dk" target="_blank" ...
Currently, I am diving into the world of RxJS. In my project, I am dealing with 2 different APIs where I need to fetch data from the first API and then make a call to the second API based on that data. Originally, I implemented this logic using the subscri ...
I am attempting to automate the clicking of the "more" button located at the bottom of a page like using watir. Below is the code I currently have: require 'watir-webdriver' b = Watir::Browser.new b.goto 'quora.com/'+ ARGV[2] + ' ...
After running npm run build, I noticed that my vue production build was displaying a blank page with the styled background color from my CSS applied. Looking at the page source, I saw that the JS code was loading correctly but the content inside my app d ...
How can I properly format SendGrid's content using Node.js? I'm currently working on sending emails from a contact form within an application using SendGrid. I have a Google Cloud Function set up that I call via an HTTP post request. Although I ...
I recently implemented the jQuery TextExt plugin (available at ) to create a language tagging input field, similar to how it's done on Facebook. On the whole, the plugin functions wonderfully. However, I've encountered an issue that has me stum ...
Currently, I am faced with a dilemma involving an Ajax function that calls a remote site, saves data to a database, and then needs to refresh the current page to display the new information. The complication arises from the fact that tabs are being utilize ...