Assume I have the code snippet below:
<body>
<div class = "header">Header content</div>
<div class = "content">content</div>
</body>
Is there a way to hide the header div as the user scrolls down on the website, and then make it appear again when scrolling up? Just like how it works on this particular website
One way to track the current position of the scrollbar in a webpage is by using JQuery's scrolltop function, like so: $(document).scrollTop();. By combining this with specific behaviors, you can create dynamic effects on your site.
var windowPosY = $(this).scrollTop();
if(windowPosY >= 500 //500 pixels)
{
//Implement a custom action such as hiding the header with an animation
}
Here's an example that I came across some time ago:
Credits to jfiddle user mariusc23 - Hide header on scroll down, show on scroll up
Upon further examination, I believe the effect displayed in the demonstration is actually an intriguing optical illusion generated by the CSS gradient within the background as the user moves downwards.
div{
height: 250px;
width: 100%;
background: red; /* Default color for browsers lacking gradient support */
background: -webkit-linear-gradient(-90deg, red, yellow); /* Safari version 5.1 to 6.0 */
background: -o-linear-gradient(-90deg, red, yellow); /* Opera version 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg, red, yellow); /* Firefox version 3.6 to 15 */
background: linear-gradient(-90deg, red, yellow); /* Standard syntax */
}
Apologies for the use of garish colors--they were borrowed from an external source.
This code snippet allows for the hiding of the header when scrolling down and revealing it again when scrolling back up.
I trust this information is helpful...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Enter title here</title>
<style>
body {
padding-top: 64px;
margin: 0;
}
.header {
position: fixed;
top: 0;
height: 36px;
background-color: cornflowerblue;
color: #fff;
width: 100%;
transition: top 0.2s ease-in-out;
}
.content {
margin: 10px;
}
.hide-header {
top: -40px;
}
</style>
</head>
<body>
<div class = "header">Header content</div>
<div class = "content">
<h1>
Heading
</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p>
Additional Lorem Ipsum text...
</p>
... (repeated Lorem Ipsum paragraphs)
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var currst = 0;
var headerheight = $('.header').outerHeight();
$(window).scroll(function(e){
var st = $(this).scrollTop();
if (st > currst && st > headerheight){
// Scrolling Down
$('.header').addClass('hide-header');
} else {
// Scrolling Up
if(st + $(window).height() < $(document).height()) {
$('.header').removeClass('hide-header');
}
}
currst = st;
});
});
</script>
</body>
</html>
Currently expanding my knowledge of jQuery and encountering an issue with some code. I am trying to incorporate an animation effect (fadeIn/fadeOut) when the user hovers over a specific element. However, if the viewport is resized to below 480px for mobil ...
I'm encountering an issue where I can't target the second child of an li element and use it in a conditional statement. Are jQuery conditionals not compatible with li:nth-child(2)? if($(".steps ul li:first-child").attr('aria-selected') ...
Encountering an issue with uploading an image to Azure storage blob. The fetch method doesn't seem to be working as expected. The process works fine in Postman but throws an error when using fetch. No issues found during deployment on Heroku. What ...
Longtime follower of stackoverflow but only my second time posting a question. Here is the code I am currently working on: echo "<td><a href = 'http://localhost/map/index.php' value='$id' >Delete</a></td>"; ...
I'm currently utilizing the ASP.NET Calendar control and am looking to implement a feature where, upon hovering over a specific date in the Calendar, a pop-up form will be displayed. The pop-up should show data retrieved from the database. Has anyone ...
Anyone have a reliable php and sql code for image upload to a database? The ones I've found are glitchy and not supported by all browsers. Any suggestions? ...
I have been working on developing a REST API for my users, utilizing express-validator for validation before adding the user to the database. However, I encountered an issue while chaining my middleware in the router.py file which resulted in the error Err ...
I've been working on customizing a tool from an open source library called angular-d3-tree, but I'm struggling with getting the links to connect properly in my D3 tree structure. This is what my current tree layout looks like: https://i.stack.im ...
After spending several hours attempting to implement a nested table within a single row using ui.grid, I am still unable to achieve the desired result. $scope.gridOptions.columnDefs = [ {name: 'id'}, {name: 'categoryName'}, ...
Currently, I am utilizing the Flexbox enabled version of Bootstrap 4 Alpha 3. Check it out on Jsfiddle body { background-color: lightgreen; } [class^="col"] { background: gold; border: 1px solid tomato; } <link href="https://cask.scotch.io/boo ...
Having trouble with internal links in my template, as they are not directing to the correct URLs. <nuxt-link :to="blog.url" >{{ blog.title }} by {{ blog.author }}</nuxt-link > In my data, I have the foll ...
After sending a jQuery AJAX JSON request, the response includes an unexpected "d" attribute. What could be causing this unusual behavior? ...
Let's consider a scenario where the main routing module is defined as follows: // app-routing.module.ts const appRoutes: Routes = [ { path: 'login', component: LoginComponent }, { path: 'auth', ...
Just diving into the world of JavaScript and encountering some challenges with splitting text. The string that needs to be split looks like this: mobile)/index.m3u8 The desired output should be: mobile and index.m3u8 I attempted to use .split("&bso ...
My CSS table appears standard: <table class="form grid"> <thead> <tr> <th>EId</th> <th>Number</th> ...
My experience with NextAuth.js for the first time has led me to realize that signing in using the Credentials provider can be a bit tricky when it comes to error handling. It seems like the default implementation should resemble something along these lines ...
I'm having an issue with customizing a video player in HTML5. When I press play on the top video, it automatically plays both videos on the page simultaneously. For reference, here is my code on jsfiddle: http://jsfiddle.net/BannerBomb/U4MZ3/27/ Bel ...
When working with a router and two asynchronous fetches from the database, how can errors be effectively caught in this scenario? router.get('/restaurant/:id', async (req, res, next) => { var current_restaurant = await Restaurant.findOne( ...
I'm still getting the hang of using styled-components and I must admit, I really enjoy the concept. However, I've run into some challenges while trying to refactor a Component with styled components. In my case, I have a bootstrap Card that conta ...
Hi there, I've been working on a JQuery code to append data to a div element and it's been successful so far. Here is the code: $('#conversation').append('<div id="receiver"><p><b>' + username + ':< ...