Is there a way to make the navigation bar shrink when scrolling, similar to how it functions on this website? The transition on this site is so seamless.
I'm guessing it's achieved with JQuery.
Is there a way to make the navigation bar shrink when scrolling, similar to how it functions on this website? The transition on this site is so seamless.
I'm guessing it's achieved with JQuery.
Check out this coding example for applying a class on scroll to a specific height and shrinking it in CSS once the class is added:
$(document).scroll(function() {
if ($(document).scrollTop() > 100) {
$('.header').addClass('shrinkIt');
} else {
$('.header').removeClass('shrinkIt');
}
})* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
width: 100%;
background: rgba(255, 255, 255, 0.6);
position: fixed;
top: 0px;
left: 0px;
padding: 50px 100px;
transition: all .3s ease;
font-size: 22px;
}
.header.shrinkIt {
padding: 20px 100px;
font-size: 16px;
}
.content {
background: #2b2b99;
height: 1400px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="header">
I will shrink.
</div>
<div class="content">
</div>
</div>To create a smooth scrolling effect on your website, you can implement a scroll event handler on the window object that adds or removes a class from the body of your document. This class can then be styled in CSS to achieve the desired design. While jQuery's animate function provides cross-browser compatibility for animations, using CSS transitions is often preferred for smoother effects.
For example, if you observe the behavior on the site you mentioned, you will notice that as you scroll, the header element's class changes to 'short'. Their code snippet from custom.js demonstrates how this is achieved:
// Scroll to top
jQuery(window).scroll(function ()
{
if (jQuery(this).scrollTop() > 100)
{
jQuery('header.navbar').toggleClass('short', true);
jQuery('.scrollup').fadeIn(300);
jQuery('.scrollup-jobs').fadeIn(300);
}
else
{
jQuery('header.navbar').toggleClass('short', false);
jQuery('.scrollup').fadeOut(1000);
jQuery('.scrollup-jobs').fadeOut(1000);
}
});
Create two CSS classes, one of which includes a new class named .smaller.
CSS
.navigation{
/* CSS for larger navigation */
}
.navigation.smaller{
/* CSS for smaller navigation */
}
You must write the CSS for both states, and then add some jQuery functionality.
JQUERY
$(document).ready(function(){
$(window).scroll(function(){
var windowScroll = $('html, body').scrollTop();
if(windowScroll >= 100){ // Scroll value can be adjusted
$('.navigation').addClass('smaller');
} else {
$('.navigation').removeClass('smaller');
};
});
});
The jQuery above will detect when you scroll the window to 100px, it will add the 'smaller' class to the navigation which already has corresponding CSS rules in place.
Similar Post: Avoiding repeated constants in CSS I am currently working on a javascript file that aims to adjust my site's resolution based on the width and height of the viewport. While I have successfully retrieved these values using JavaScript ...
I am facing an issue with disabling right click for the iframe. I've successfully disabled it for the default URL of the IFrame, but when displaying any other webpage, the right click remains usable. Below are the sample codes I have used: document.o ...
Lately, I've been exploring the world of CSS and Angular. Can someone give me a jumpstart on using CSS to design an element like the one shown in this https://i.stack.imgur.com/vcR3Z.png image? Essentially, this outer tag consists of a div element th ...
I am working on a project where I have a div with the id #pageToLoad. This div loads a form from formPage.php. I want to ensure that the page is fully loaded in the div so that if any errors occur, I can reset the form using: $("#form").reset(); Can some ...
I am facing an issue with my PHP script that generates buttons for each content schedule. The script outputs multiple HTML buttons with the same name, class, and ID, but their values are dynamically set based on a variable. In my jQuery code, I have selec ...
I have encountered an issue in my application involving a combination of <h:outputLink> and <p:commandButton> as shown below: <h:outputLink target="_blank" value="theURL"> <p:commandButton value="Click" type="button" /> </h: ...
Currently, I am incorporating the React Material-UI library into my project and faced with a challenge of conditionally changing the error color of a TextField. My goal is to alter the color of the helper text, border, text, and required marker to yellow ...
CHANGE: I keep receiving the object {"readyState":1}. Why is this happening? How can I successfully retrieve the result from the $.post (specifically, the object {"result":"ERROR"})? This pertains to using jEditable. (Please note: This seems more like a ...
I am currently working on an svg animation that involves changing the color of the svg to a different color, creating a running light effect. Rather than fading the fill color of the entire svg as commonly seen in examples, I aim to achieve a dynamic trans ...
I am attempting to handle all errors on my own. When an error occurs in jQuery.ajax(), I can detect it using the error options. However, this error is not catchable by my window.onerror event. window.onerror = function(e) { console.log("I was here! E ...
I am currently in the process of learning web development languages, and I'm attempting to create a dropdown list using JavaScript (I previously tried in CSS without success). I would greatly appreciate it if you could review my code and let me know ...
Check out the plot in this jsfiddle: http://jsfiddle.net/essennsee/y5HCm/ The plot looks good in Firefox, but only shows the legend in IE and Chrome. If I remove the following code snippet it works fine. Is there a different way to format the labels?: ...
I have recently been working on creating a basic text editor using ContentEditable. The main requirement for the application is to allow users to insert blocks of text that are protected from typical editing actions. These protected text blocks should not ...
So here's what's going on: I developed a horror movie bucket list app for my bootcamp final project. The minimum viable product received positive feedback, and I obtained my certification. However, now that I've graduated, I want to enhance ...
I am currently working on creating a user interface layout with components that need to be arranged in a specific order, as depicted in the accompanying image. My task involves developing a Material UI Dialog within a React application based on the design ...
I'm currently working with datatables and tabletools on a sizeable table that is populated through an ajax request. Once the user selects multiple rows, they are displayed as selected within the table. Is there a way to specify the csv/xls export to ...
"I'm having trouble getting the $_FILES variable in my PHP script when posting a simple form using AJAX." <form id="submitForm" method="post" enctype="multipart/form-data" > <input type="file" name="file" /> <input type="tex ...
Hey there! I'm currently in the process of incorporating the jQuery load() method to dynamically load content into a web page based on the input value entered. However, I seem to be encountering an issue where multiple AJAX calls are being made simult ...
As someone who is new to web development, I have a question that may seem silly to some. I am familiar with adding div tags inside php tags, but I am unsure if it's possible to add onclick functions or any other type of function to these div tags. He ...
I'm working on a simple webgrid that has 3 columns: View columns: grid.Columns( grid.Column("Applicant Name", format: (item) => @Html.ActionLink((string)item.Name, "EditApplicant", "Applicant", new { id = item.ApplicantId }, null), style: "AppN ...